動的にロードされた子コンポーネントにjsonデータをバインドできません。

Question

親コンポーネントから子コンポーネントを動的にロードしようとしています。親コンポーネントから、子コンポーネントに使用されるいくつかのパラメータを子コンポーネントに渡して、サービス呼び出しを行い、WebAPIサービスからデータを取得する必要があります。返されるデータは、子コンポーネントのいくつかの入力コントロールにバインドされる必要があります。

私は親から子コンポーネントを読み込んでいて、入力コントロールデータを私がローカルで初期化したJSONオブジェクトからバインドしようとしています。私はここでいくつかの問題に直面している、データはここに正しくバインドされていません。

Plunker URL

私の子コンポーネントのコード

import {Component, Input} from '@angular/core' 
import { FORM_DIRECTIVES } from '@angular/common'; 

const SAMPLE: Sample[] = [ 
    { queueId: 11, name: 'Mr. Nice' }, 
    { queueId: 12, name: 'Narco' }, 
    { queueId: 19, name: 'Magma' }, 
    { queueId: 20, name: 'Tornado' } 
]; 

@Component({ 
    selector: 'load', 
    directives: [FORM_DIRECTIVES], 
    template:`<h1>This is from loader</h1> 
    <input type="text" [(ngModel)]="resultData.queueId" /> 

    ` 
}) 
export class Loader{ 
    @Input() ParentID : any; 
    // resultData : any; 
    resultData = SAMPLE; 
    constructor() 
    { 


    } 
} 


export class Sample { 
    queueId: number; 
    name: string; 
} 

Answer 1

はresultDataがSample[]であり、あなたはそれがSampleであることを期待したテンプレートではありません。 Sampleとなるようにテンプレートを更新します。

<input type="text" [(ngModel)]="resultData[0].queue.Id />