@Input（）は、角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

あなたの子コンポーネント（およびそのビュー）に入るまで、レコードがnullでないようにする必要があります。

使用エルビス演算子テンプレートを保護するために：

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