[英]Typescript Error undefined when calling from parent
I know there are many questions with accepted answers in stackoverflow. 我知道在stackoverflow中有很多问题和可以接受的答案。 But I didn't find the one which I am looking for. 但是我没有找到我想要的那个。
I have one parent html and then importing another html from parent. 我有一个父HTML,然后从父导入另一个HTML。 I am getting the list in parent.ts and passing to to the child. 我在parent.ts中获取列表并将其传递给孩子。 Then when I use the list in child html, I am getting this. 然后,当我在子html中使用列表时,我得到了。
Any help would be greatly appreciated. 任何帮助将不胜感激。
Error: 错误:
ERROR TypeError: Cannot read property '0' of undefined
at Object.eval [as updateDirectives] (QuarterDataComponent.html:5)
dashboard.component.ts dashboard.component.ts
dashboardDataList: Dashboard[];
ngOnInit() {
this.selectedLineId = sessionStorage.getItem("LINE_ID");
if(this.selectedLineId === undefined || this.selectedLineId === null) {
alert("Please select Line in 'Configuration' tab");
this.router.navigate(['/configuration']);
} else {
this.populateDashboardData();
}
}
populateDashboardData() {
this.dashboardService
.getDashboardData(1, 101, this.fromDatetime, this.toDatetime)
.subscribe(dashboardDataList => this.dashboardDataList = dashboardDataList);
}
dashboard.component.html dashboard.component.html
<div style="height:100%;">
<app-quarter-data [dashboardDataList]="dashboardDataList"></app-quarter-data>
</div>
quarter-data.component.ts @Component({ selector: 'app-quarter-data', templateUrl: './quarter-data.component.html', styleUrls: ['./quarter-data.component.css'] }) export class QuarterDataComponent { quarter-data.component.ts @Component({选择器:'app-quarter-data',templateUrl:'./quarter-data.component.html',styleUrls:['./quarter-data.component.css'] })导出类QuarterDataComponent {
@Input() dashboardDataList: Dashboard[];
ngOnInit() {
alert("1...");
}
} quarter-data.component.html ( Error from the code dashboardDataList[0] ) } quarter-data.component.html( 代码dashboardDataList [0]中的错误 )
<fieldset class="scheduler-border" [ngClass]="dashboardDataList[0].isCurrentQuarter==true ? 'current-quarter-true' : 'current-quarter-false'">
<div class="quarterTopDiv">
<table class="quarterTopTable table-sm table-striped" appearance="border">
<thead>
<tr>
<th>Associate #</th>
<th>Sequence #</th>
</tr>
</thead>
<tbody >
<tr *ngFor="let installedPartView of dashboardDataList[0].installedPartViewList let index=index; let odd=odd; let even=even">
<td>{{installedPartView.associateId}}</td>
<td [tooltip]="'[' + installedPartView.productId + ']\n [' + installedPartView.partName + ']'" placement="top" show-delay="500">{{installedPartView.afOnSequenceNo}}</td>
</tr>
</tbody>
</table>
</div>
</fielsdet>
dashboard.service.ts dashboard.service.ts
getDashboardDataByLineAndProcess(assNo: number, processId: string, fromDatetime: string, toDatetime: string) { return this.http .get(this.serviceUrl+'defect-result-data-for-dashboard/'+ assNo+ '/' + processId+'/' + fromDatetime + '/' + toDatetime) .map(response => { const array = response.json() as Dashboard[]; return array; }) .catch((error: any) => { if (error._body) { const errorBody = JSON.parse(error._body); this.alertService.error(errorBody.message); } else { this.alertService.error(error); } return Observable.throw(error.statusText); }); getDashboardDataByLineAndProcess(assNo:number,processId:string,fromDatetime:string,toDatetime:string){返回this.http .get(this.serviceUrl +'defect-result-data-for-dashboard /'+ assNo +'/'+ processId +'/ '+ fromDatetime +'/'+ toDatetime).map(response => {const array = response.json()as Dashboard []; return array;}).catch((error:any)=> {if(error。 _body){const errorBody = JSON.parse(error._body); this.alertService.error(errorBody.message);} else {this.alertService.error(error);} return Observable.throw(error.statusText);} ); } }
REST Service output: REST服务输出:
[{
"quarter": 1,
"isCurrentQuarter": true,
"noOfDefects": 3,
"target": 0,
"lineId": null,
"installedPartViewList": [{
"defectResultId": 2000009918,
"productId": "VAN GUARD",
"partName": "AIR SHUTTLE",
"partId": null,
"partSerialNumber": "A1",
"actualTimestamp": "2019-03-06T21:17:32.773+0000",
"quarter": 1,
"associateId": "userid ",
"productionDate": null,
}, {
"defectResultId": 2000009919,
"productId": "SUN PH",
"partName": "AIR SHUTTLE",
"partId": null,
"partSerialNumber": "A1",
"installedPartStatus": 1,
"measurementStatus": null,
"actualTimestamp": "2019-03-06T21:17:32.773+0000",
"quarter": 1,
"associateId": "userid ",
"productionDate": null,
}, {
"defectResultId": 2000009920,
"productId": "SUM HOS",
"partName": "AIR SHUTTLE",
"partId": null,
"partSerialNumber": "A1",
"installedPartStatus": 1,
"measurementStatus": null,
"actualTimestamp": "2019-03-06T21:17:32.773+0000",
"quarter": 1,
"associateId": "userid ",
"productionDate": null,
}],
"defectResultViewList": [{
"defectResultId": 2000009918,
"productId": "BOA",
}, {
"defectResultId": 2000009919,
"productId": "PHONE RT",
}, {
"defectResultId": 2000009920,
"productId": "SUN PH",
}],
"processAssociateViewList": null,
"associateSummaryViewList": null
}, {
"quarter": 2,
"isCurrentQuarter": null,
"noOfDefects": 0,
"target": 0,
"lineId": null,
"installedPartViewList": [],
"defectResultViewList": null,
"processAssociateViewList": null,
"associateSummaryViewList": null
}, {
"quarter": 3,
"isCurrentQuarter": null,
"noOfDefects": 0,
"target": 0,
"lineId": null,
"installedPartViewList": [],
"defectResultViewList": null,
"processAssociateViewList": null,
"associateSummaryViewList": null
}, {
"quarter": 4,
"isCurrentQuarter": null,
"noOfDefects": 0,
"target": 0,
"lineId": null,
"installedPartViewList": [],
"defectResultViewList": null,
"processAssociateViewList": null,
"associateSummaryViewList": null
}]
The template is being rendered before it receives the data. 模板在接收数据之前已呈现。 You can wrap the child component in a <ng-container>
and use an *ngIf
directive to only display once the dashboardDataList
is resolved. 您可以将子组件包装在<ng-container>
并使用*ngIf
指令仅在dashboardDataList
解析后才显示。
<ng-container *ngIf="dashboardDataList">
...
<fieldset class="scheduler-border" [ngClass]="dashboardDataList[0].isCurrentQuarter==true ? 'current-quarter-true' : 'current-quarter-false'">
</fielsdet>
...
</ng-container>
我想要两件事,1)实施AfterViewInit来填充子组件而不是ngOnInit()2)在父组件中具有* ngIf条件
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.