複数のネストされたコンポーネントにデータをバインドする方法をAngular 2？次の構造を使用して角度の4アプリで

Question

：

ComponentAは、サービスからモデルをfolowing取得：

class ViewModel { 
    public someBool: boolean;     
    public someNumber: number;    
    public someArray: CFlightClassQuote[]; 
    public someOtherNumber: number;    
    public someString: string; 
} 

ComponentAクラス：

export class ComponentA implements OnInit { 
    searchResult: Array<ViewModel>; 

    constructor(private searchResultService: SearchResultService, private router: Router) { } 

    ngOnInit(): void { 
    this.searchResultService.getSearchResultTable('hash').then(result => { 
     this.searchResult = result; 
    }); 
    } 
} 

ComponentAのtempate：

*some html* 
    <div> 
     <app-component-b [dataSet]="searchResult"></app-component-b> 
    </div> 
*some html* 

componentBでは私が使用しています* ngFor

ComponentBテンプレート：

<div class="results-table" *ngFor="let item of dataSet"> 
    <span>{{item.someString}}</span> 
    <app-component-c [dataSet]="item.SomeArray"></<app-component-c> 

another html 
</div> 

ComponentBクラス：

export class ComponentB implements OnInit { 
    @Input() dataSet: Array<ViewModel>; 

    constructor() { } 

    ngOnInit() { 
    } 

データが正しくまだ空ComponentBしかしComponentCのために結合されました。 私は、この文字列に間違っていると思います：

<app-component-c [dataSet]="item.SomeArray"></<app-component-c> 

とデータがComponentAとComponentBの場合のようにComponentCに渡す必要があります。

これはどのように正しく行う必要がありますか？

Answer 1

あなたの質問が正しいとし、コンポーネントCがコンポーネントBと同様に定義されているが、正しい配列タイプ（CFlightClassQuote）を参照していると仮定すると、参照するプロパティにアクセスするとテンプレートに入力ミスがあります。配列。

これ、

<app-component-c [dataSet]="item.SomeArray"></<app-component-c> 

は、

<app-component-c [dataSet]="item.someArray"></<app-component-c> 
           ^^^ 
           here