角2：コンポーネント入力を使用してネストされた配列を渡す

Question

オブジェクトがネストされた配列で構成されている場合、複雑なオブジェクトを子コンポーネントに渡すより良いソリューションがありますか？

は、ここに私の問題です：{{animal.quadripeds[2].dogs[4].furColor}}

インデックス値はハードコードされている：子コンポーネントに表示される部分のhtmlで、あなたはこのようなネストされた配列を表現する必要があります。例えば、このようにそれを見てよりよいだろう： はanimal.quadripeds.find(q => q.isDirty == true).dogs.find(d => d.isDirty == true).furColor.は残念ながら、あなたは{{}}

で.find（）を使用することはできませんここではあなたの楽しみのためのplnkrです：Nested Arrays via Component Input

感謝！

Answer 1

あなたのテンプレートにfind方法を使用することはできませんが、それはあなたがたとえば、あなたのコンポーネントで使用することはできませんという意味ではありません。

import {Input, Component, OnInit} from 'angular2/core'; 

@Component(...) 
export class ChildComponent implements OnInit { 
    @Input() transport: Transport; 

    private _valueToDisplay; 

    ngOnInit() { 
     this._valueToDisplay = animal.quadripeds 
      .find(q => q.isDirty == true) 
      .dogs.find(d => d.isDirty == true) 
      .furColor; 
    } 

    get valueToDisplay() { 
     return this._valueToDisplay; 
    } 
} 

2つのこと：

• OnInitインターフェイスを使用していることに注意してください。入力プロパティがコンストラクタでまだ初期化されていないためです（ngOnInit関数で初期化ロジックを実装するよう注意してください）。
• 入力プロパティが更新されたときに同じロジックを処理する必要がある場合は、ngOnChanges関数を実装するか、入力プロパティにセッターを使用します。 @dfsqにより示唆されるように、このロジックは、おそらくサービスに行くべきhttp://plnkr.co/edit/BTzAfO6AGSLnOn8S1l24

  注：

はここにあなたの更新plunkrです。