Printing Custom Object in ionic 2 - ionic2

Question

There is a class in my app SL-Leg.It has some variables which would hold the values.
When i print object of this class then [object object] is being printed
but when i try to access the value of the class by myObject.line for example then there is an error undefined is not an object (evaluating self.context.$implicit.line
leglist is array which holds the objects from class SL'Leg.
<ion-header>
<ion-navbar>
<ion-title>showTripInfo</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-content class="show-trips">
<ion-list>
<ion-item-group *ngFor="let leg of legList" (click) = "showTripInfo(tp)">
<ion-card>
<table style="width:100%">
<tr>
<div class="page-show-trips.card-title">
<th item-width="100%">{{leg}} >> {{leg.line}}</th>
</div>
</tr>
<tr>
<div class="page-show-trips.card-subtitle">
<th item-width="100%">{{leg}} >> {{leg}}</th>
</div>
</tr>
</table>
<div ng-repeat="(key, value) in tp.LegList" > {{key}} {{value}} </div>
</ion-card>
</ion-item-group>
</ion-list>
</ion-content>
</ion-content>
SL-Leg is here
i
mport { Component } from '#angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { Address } from './sl-Address';
/*
Generated class for the SlTripClass page.
See http://ionicframework.com/docs/v2/components/#navigation for more info on
Ionic pages and navigation.
*/
#Component({
selector: 'page-sl-legs',
//templateUrl: 'sl-trip-class.html'
})
export class Leg {
// public from_time: String;
public legIndex: Number;
public enabled_TransportType: Boolean; // Default True
public enabled_LineNumber: Boolean; // Default true
public showHideLeg: Boolean; // Default true means show all legs
public filterLine: Boolean;
public filterDepartures: Boolean;
// ...:Common publiciables available in Travel /Walk
public journeyType : String;
// available via LegDetail
public origin: Address;
public destination: Address;
public name: String;
public type: String;
public idx: String;
public geomRef: String;
public legImageName: String;
//-- Only found in --------Walk
public dist: String;
public hide: String;
//-- Only found in --------Travel
public dir: String;
public line: String;
public journeyDetailRef: String;
public rtu_Message_Flag: Boolean;
public rtu_Message: String;
// constructor(public tripObjectFromSl: any,public navCtrl: NavController, public navParams: NavParams) {
constructor() {
this.legIndex = 0;
this.enabled_TransportType= true; // Default True
this.enabled_LineNumber= true;
this.showHideLeg= true;
this.filterLine= false;
this.filterDepartures;
this.journeyType= String();;
this.origin= new Address();
this.destination= new Address();
this.name= String();
this.type= String();
this.idx= String();
this.geomRef= String();
this.legImageName= String();
this.dist= String();
this.hide= String();
//-- Only found in --------Travel
this.dir= String();
this.line= String();
this.journeyDetailRef= String();
this.rtu_Message_Flag= true;
this.rtu_Message= String();
}
ionViewDidLoad() {
console.log('ionViewDidLoad SlTripClassPage');
}
}

Answer 1

The first object in the array LegList is null or undefined.
You could just put a null check
{{leg?.line}}
Also the legIndex value starts from 1.
I suppose you are inserting with for loop starting index 1.