Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Cannot read property of 'xxx' of undefined

I'm using Ionic 2, in which a component has two components and the data were shared using emitters. But when I execute the program, it comes to this error.

Runtime Error Uncaught (in promise): TypeError: Cannot read property 'BillNo' of undefined TypeError: Cannot read property 'BillNo' of undefined at Object.eval [as updateDirectives]

Here's my code:

bill-settlement.html

...
<page-bill-list (BillSelected)="onBillSelected($event)"></page-bill-list>
...
<page-bill-details [billItem]="billItem"></page-bill-details>
...

bill-settlement.ts

@Component({
  selector: 'page-bill-settlement',
  templateUrl: 'bill-settlement.html',
})
export class BillSettlement {
  ...
  billItem: BillDetail
  ...
  onBillSelected(billData: BillDetail) {
    this.billItem = billData
  }
}

bill-list.html

<ion-buttons>
  <button ion-button *ngFor="let item of billItems" (click)="getBillDetails(item)">
      {{item.BillNo}}
  </button>
</ion-buttons>

bill-list.ts

@Component({
  selector: 'page-bill-list',
  templateUrl: 'bill-list.html',
})
export class BillList {
  billItems: BillDetail[] = []
  billItem = new BillDetail()
  @Output() BillSelected = new EventEmitter<BillDetail>()
  constructor(public navCtrl: NavController,
    public navParams: NavParams,
    public billSrv: BillerService,
    public authSrv: AuthService,
    public genSrv: GenericService) {
    this.billSrv.getBills()
      .subscribe(data => {
        this.billItems = data
      })
  }
  getBillDetails(item: BillDetail) {
    this.BillSelected.emit(this.billItem)
  }
}

bill-details.ts

@Component({
  selector: 'page-bill-details',
  templateUrl: 'bill-details.html',
})
export class BillDetails {
    ...
    @Input() billItem: BillDetail
    ...
}

bill-details.html

...
<ion-input text-right type="text" [value]="billItem.BillNo" readonly></ion-input> //billItem model has BillNo property
...

The problem is billItem.BillNo in bill-details.ts has no value initially, it is defined only when I click the bill number button in the bill-list.html. How can i define the billItem initially and then replaces when clicked with the bill number button.

like image 301
Ranjith Varatharajan Avatar asked May 08 '17 04:05

Ranjith Varatharajan


People also ask

What does it mean by Cannot read property of undefined?

The "Cannot read properties of undefined" error occurs when trying to access a property on an undefined value. You often get undefined values when: accessing a property that does not exist on an object. accessing an index that is not present in an array.

Can not read the property value of undefined?

There are 3 reasons the "Cannot read property 'value' of undefined" error occurs: Accessing the value property on a variable storing an undefined value. Accessing a property on a DOM element that doesn't exist. Inserting the JS script tag above the HTML, where the DOM elements are declared.


1 Answers

The view is loaded before billItem is set.

You could use a safe navigation operator ?.

<ion-input text-right type="text" [value]="billItem?.BillNo" readonly></ion-input> //billItem model has BillNo property

or set it to empty object in the constructor of bill-details.ts:

constructor(...){
  if(! this.billItem){
    this.billItem={}
  }
}
like image 92
Suraj Rao Avatar answered Oct 16 '22 00:10

Suraj Rao