Typescript Error undefined when calling from parent

Question

I know there are many questions with accepted answers in 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. I am getting the list in parent.ts and passing to to the child. Then when I use the list in child html, I am getting this.

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

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({ selector: 'app-quarter-data', templateUrl: './quarter-data.component.html', styleUrls: ['./quarter-data.component.css'] }) export class QuarterDataComponent {

    @Input() dashboardDataList: Dashboard[];

  ngOnInit() {
      alert("1...");
  }

} quarter-data.component.html ( Error from the code 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) { 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); }); }

REST Service output:

[{
    "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
}]

Answer 1

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">
    ...
    <fieldset class="scheduler-border" [ngClass]="dashboardDataList[0].isCurrentQuarter==true ? 'current-quarter-true' : 'current-quarter-false'">
    </fielsdet>
    ...
</ng-container>

Answer 2

我想要两件事，1）实施AfterViewInit来填充子组件而不是ngOnInit（）2）在父组件中具有* ngIf条件