@Input（）未按预期在Angular 2中的父子组件之间传递App

Question

我想抽象出一个表格数据显示，使其成为可以加载到各个父组件中的子组件。我正在这样做，使整个应用程序“烘干机”。在我使用observable之前订阅服务并进行API调用，然后直接打印到每个组件视图（每个视图都有表格布局）之前。现在我想让表格数据区域成为子组件，并且只为每个父组件绑定observable的结果。无论出于何种原因，这不能按预期工作。

下面是我在父组件视图：

<div class="page-view"> 
    <div class="page-view-left"> 
     <admin-left-panel></admin-left-panel> 
    </div> 
    <div class="page-view-right"> 
     <div class="page-content"> 
      <admin-tabs></admin-tabs> 
      <table-display [records]="records"></table-display> 
     </div> 
    </div> 
</div> 

和组件文件看起来像这样：

import { API } from './../../../data/api.service'; 
import { AccountService } from './../../../data/account.service'; 
import { Component, OnInit, Input } from '@angular/core'; 
import { Router, ActivatedRoute } from '@angular/router'; 
import { TableDisplayComponent } from './../table-display/table-display.component'; 

@Component({ 
    selector: 'account-comp', 
    templateUrl: 'app/views/account/account.component.html', 
    styleUrls: ['app/styles/app.styles.css'] 
}) 
export class AccountComponent extends TabPage implements OnInit { 

    private section: string; 
    records = []; 
    errorMsg: string; 

    constructor(private accountService: AccountService, 
       router: Router, 
       route: ActivatedRoute) { 
    } 

    ngOnInit() { 
     this.accountService.getAccount() 
      .subscribe(resRecordsData => this.records = resRecordsData, 
      responseRecordsError => this.errorMsg = responseRecordsError); 
    } 
} 

然后，在子组件（包含表中的一个-display视图），我包含@Input（）用于“记录” - 这是我的observable的结果分配给父组件。所以在孩子（表显示）组件，我有这样的：

import { AccountService } from './../../../data/account.service'; 
import { Component, OnInit, Input } from '@angular/core'; 

@Component({ 
    selector: 'table-display', 
    templateUrl: './table-display.component.html', 
    styleUrls: ['./table-display.component.less'] 
}) 
export class TableDisplayComponent { 

    @Input() records; 

    constructor() { 
    } 

} 

最后，这里的一些从我的表显示视图中的相关代码：

<tr *ngFor="let record of records; let i = index;"> 
<td>{{record.name.first}} {{record.name.last}}</td> 
       <td>{{record.startDate | date:"MM/dd/yy"}}</td> 
       <td><a class="bluelink" [routerLink]="['/client', record._id ]">{{record.name.first}} {{record.name.last}}</a></td> 

当我用它来与此配置中，我通过API /数据库获取“记录”属性的“未定义”错误。当我在同一个组件中同时使用表格显示和服务调用时，我没有收到这些错误。所以我在这里完成的工作是抽象出表格显示，以便我可以将它嵌套在几个父组件中，而不是在每个需要它的父组件中显示完全相同的表格显示。

我在这里错过了什么？这种配置看起来有什么问题？

Answer 1

您需要防止记录为空，直到它进入您的子组件（因此它是视图）。

使用猫王运营商，以保护您的模板：

<tr *ngFor="let record of records; let i = index;"> 
    <td>{{record?.name?.first}} {{record?.name?.last}}</td> 
    <td>{{record?.startDate | date:"MM/dd/yy"}}</td> 
    <td><a class="bluelink" [routerLink]="['/client', record?._id ]"> {{record?.name?.first}} {{record?.name?.last}}</a></td> 

您还可以将输入分配一个空数组，以帮助这个问题：

@Input() records = [];