@Input() Не проходит, как ожидалось, между компонентами родительского ребенка в приложении Angular 2

Question

Я пытаюсь абстрагироваться от отображения табличных данных, чтобы сделать его дочерним компонентом, который может быть загружен в различные родительские компоненты. Я делаю это, чтобы сделать общее приложение «сушилкой». До того, как я использовал наблюдаемый, чтобы подписаться на услугу и совершать вызовы API, а затем печатать непосредственно на каждом представлении компонентов (каждый из которых имеет табличный макет). Теперь я хочу сделать область табличных данных дочерним компонентом и просто привязать результаты наблюдаемого для каждого из родительских компонентов. По какой-то причине это работает не так, как ожидалось.

Вот что у меня есть с точки зрения родительского компонента:

<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() для «записей» - это то, к чему привязан результат моего наблюдаемого в родительском компоненте. Так у ребенка (таблицы отображения) компонента, у меня есть это:

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 = [];