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数据绑定到动态加载的子组件

1 个答案: