typescript 无法读取未定义的“xxx”的属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43840008/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Cannot read property of 'xxx' of undefined
提问by Ranjith Varatharajan
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.
我正在使用 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]
运行时错误未捕获（承诺）：TypeError：无法读取未定义的属性“BillNo” TypeError：无法读取 Object.eval [as updateDirectives] 处未定义的属性“BillNo”
Here's my code:
这是我的代码：
bill-settlement.html
bill-settlement.html
...
<page-bill-list (BillSelected)="onBillSelected($event)"></page-bill-list>
...
<page-bill-details [billItem]="billItem"></page-bill-details>
...
bill-settlement.ts
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
账单列表.html
<ion-buttons>
<button ion-button *ngFor="let item of billItems" (click)="getBillDetails(item)">
{{item.BillNo}}
</button>
</ion-buttons>
bill-list.ts
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
bill-details.ts
@Component({
selector: 'page-bill-details',
templateUrl: 'bill-details.html',
})
export class BillDetails {
...
@Input() billItem: BillDetail
...
}
bill-details.html
bill-details.html
...
<ion-input text-right type="text" [value]="billItem.BillNo" readonly></ion-input> //billItem model has BillNo property
...
The problem is billItem.BillNoin bill-details.tshas 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.
问题是，billItem.BillNo在bill-details.ts最初没有价值，只有当我点击该法案号按钮，它被定义bill-list.html。我如何最初定义 billItem，然后在单击账单编号按钮时进行替换。
回答by Suraj Rao
The view is loaded before billItemis set.
在billItem设置之前加载视图。
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:
或在bill-details.ts的构造函数中将其设置为空对象：
constructor(...){
if(! this.billItem){
this.billItem={}
}
}
