[英]Typescript Angularjs Controller Scope undefined when calling from Directive
[英]Typescript Error undefined when calling from parent
我知道在stackoverflow中有很多問題和可以接受的答案。 但是我沒有找到我想要的那個。
我有一個父HTML,然后從父導入另一個HTML。 我在parent.ts中獲取列表並將其傳遞給孩子。 然后,當我在子html中使用列表時,我得到了。
任何幫助將不勝感激。
錯誤:
ERROR TypeError: Cannot read property '0' of undefined
at Object.eval [as updateDirectives] (QuarterDataComponent.html:5)
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
<div style="height:100%;">
<app-quarter-data [dashboardDataList]="dashboardDataList"></app-quarter-data>
</div>
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( 代碼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
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服務輸出:
[{
"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
}]
模板在接收數據之前已呈現。 您可以將子組件包裝在<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.