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 @零件（{ 选择器：“ 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 +'仪表盘缺陷结果数据/'+ assNo +'/'+ processId +'/'+ fromDatetime +'/'+ toDatetime） .map（response => { const array = response.json（）as Dashboard []; 返回数组； }） .catch（（错误：任何）=> { 如果（error._body）{ const errorBody = JSON.parse（error._body）; this.alertService.error（errorBody.message）; }其他{ this.alertService.error（error）; } 返回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条件

从父级电话

2 个答案: