angular – 无法读取未定义的’xxx’的属性

发布时间：2020-12-17 07:06:16 所属栏目：安全来源：网络整理

导读：我正在使用Ionic 2,其中一个组件有两个组件,数据是使用发射器共享的.但是当我执行程序时,就出现了这个错误. Runtime Error Uncaught (in promise): TypeError: Cannot read property ‘BillNo’ of undefined TypeError: Cannot read property ‘BillNo’ of

我正在使用Ionic 2,其中一个组件有两个组件,数据是使用发射器共享的.但是当我执行程序时,就出现了这个错误.

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

这是我的代码：

比尔 – settlement.html

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

比尔 – settlement.ts

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

比尔 – list.html

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

比尔 – 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)
  }
}

比尔 – details.ts

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

比尔 – details.html

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

问题是bill-details.ts中的billItem.BillNo最初没有值,只有当我点击bill-list.html中的账单号按钮时才定义它.如何最初定义billItem,然后在使用bill number按钮单击时替换.

解决方法

在设置billItem之前加载视图.

你可以使用安全的导航运算符吗？

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

或者在bill-details.ts的构造函数中将其设置为空对象：

constructor(...){
  if(! this.billItem){
    this.billItem={}
  }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!