首页 文章

无法读取未定义的'xxx'的属性

提问于
浏览
4

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

运行时错误未捕获(在承诺中):TypeError:无法读取未定义的属性'BillNo'TypeError:无法读取Object.eval中未定义的属性'BillNo'[as updateDirectives]

这是我的代码:

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
...

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

1 回答

  • 10

    在设置 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={}
      }
    }
    

相关问题