从父级调用时出现Typescript错误未定义

Question

我知道在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
}]

Answer 1

模板在接收数据之前已呈现。 您可以将子组件包装在<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>

Answer 2

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