无法将 json 数据绑定到动态加载的子组件

Question

我正在尝试从父组件动态加载子组件。我需要从父组件向子组件传递一些参数，这些参数将在子组件中用于进行服务调用并从 WebAPI 服务检索一些数据。返回的数据应该绑定到子组件中的一些输入控件。

出于测试目的，我创建了一个 plunker，其中我正在从父组件加载子组件，并且我试图绑定来自我在本地初始化的 JSON 对象的输入控件数据。我在这里遇到了一些问题，数据没有在此处正确绑定。

我的子组件代码

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 />

无法将 json 数据绑定到动态加载的子组件

Not able to bind json data to dynamically loaded child component

angular2-directives

angular