web-dev-qa-db-fra.com

Impossible de lire la propriété de 'xxx' non définie

J'utilise Ionic 2, dans lequel un composant a deux composants et les données ont été partagées à l'aide d'émetteurs. Mais lorsque j'exécute le programme, il s'agit de cette erreur.

Erreur d'exécution non interceptée (en promesse): TypeError: Impossible de lire la propriété 'BillNo' de non définie TypeError: Impossible de lire la propriété 'BillNo' de non définie sur Object.eval [en tant que updateDirectives]

Voici mon 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
    ...
}

facture-détails.html

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

Le problème est billItem.BillNo dans bill-details.ts n'a pas de valeur au départ, elle n'est définie que lorsque je clique sur le bouton du numéro de facture dans le bill-list.html. Comment puis-je définir le billItem au départ puis le remplace lorsque l'on clique avec le bouton de numéro de facture.

angulartypescriptionic2ionic3
8
Ranjith Varadan

La vue est chargée avant que billItem ne soit défini.

Vous pouvez utiliser un opérateur de navigation sécurisé ?.

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

ou définissez-le sur un objet vide dans le constructeur de bill-details.ts:

constructor(...){
  if(! this.billItem){
    this.billItem={}
  }
}
20
Suraj Rao