我使用的是 Ionic 2,其中一个组件有两个组件,并且使用发射器共享数据。但是当我执行程序时,却出现了这个错误。
未捕获的运行时错误(承诺中):TypeError:无法读取属性
未定义类型错误的“BillNo”:无法读取属性“BillNo”
在 Object.eval 处未定义 [作为 updateDirectives]
这是我的代码:
账单结算.html
...
<page-bill-list (BillSelected)="onBillSelected($event)"></page-bill-list>
...
<page-bill-details [billItem]="billItem"></page-bill-details>
...
账单结算.ts
@Component({
selector: 'page-bill-settlement',
templateUrl: 'bill-settlement.html',
})
export class BillSettlement {
...
billItem: BillDetail
...
onBillSelected(billData: BillDetail) {
this.billItem = billData
}
}
帐单列表.html
<ion-buttons>
<button ion-button *ngFor="let item of billItems" (click)="getBillDetails(item)">
{{item.BillNo}}
</button>
</ion-buttons>
帐单列表.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)
}
}
账单详细信息.ts
@Component({
selector: 'page-bill-details',
templateUrl: 'bill-details.html',
})
export class BillDetails {
...
@Input() billItem: BillDetail
...
}
账单详情.html
...
<ion-input text-right type="text" [value]="billItem.BillNo" readonly></ion-input> //billItem model has BillNo property
...
问题是billItem.BillNo
in bill-details.ts
最初没有值,只有当我单击帐单编号按钮时才定义它bill-list.html
。我如何最初定义 billItem,然后在单击帐单编号按钮时进行替换。