我如何在Angular 2中的1个属性结合内结合2个变量

Question

我正在尝试动态生成和使用JSON数据中的表单控件。我想出的一个简单的实验来弄清楚我需要应用的机制如下。

类中定义的变量

demoA: string         = 'name';
demoB: Array<string>  = ['city', 'state'];
demoC: FormGroup      = new FormGroup({});

功能用于从demoA和demoB获取属性并转换为FomControl S

loadStuff(){
    let a = this.demoA;
    let b = this.demoB;
    let ab: Array<string> = [];
    ab.push(a);
    b.forEach( bb => {ab.push(bb)} );
    console.log(ab);
    ab.forEach( ctrl => this.demoC.addControl(ctrl, new FormControl('')) );
    console.log( this.demoC.value );
}

现在demoC的值是

demoC: {name:'', city:'', state:''}

由于我要在组件加载时即时创建它，因此没有预定义的方法可以绑定到它，这使我怀疑我是否可以在输入上的绑定物中绑定到它像这样

<input type="text" [(ngModel)]="demoC.{{demoA}}" />

当然不起作用，也不是

<input type="text" [(ngModel)]="demoC.[demoA]" />
<input type="text" [(ngModel)]="demoC.[(demoA)]" />
<input type="text" [(ngModel)]="demoC.(demoA)" />
<input type="text" [(ngModel)]="(demoC)+'.'+(demoA)" />
<input type="text" [(ngModel)]="[(demoC)+'.'+{{demoA}}]" />
<input type="text" [(ngModel)]="('demoC.'+{{demoA}})" />
<input type="text" [(ngModel)]="['demoC.'+{{demoA}}]" />
<input type="text" [(ngModel)]="['demoC.'+[demoA]]" />
<input type="text" [(ngModel)]="[('demoC.')+[demoA]]">

如果我希望结果是 demoC.name，我该怎么做？

Answer 1

为什么要{{}}语法？您可以简单地使用 [(ngModel)]=demoC[demoA] thi语法来绑定 dynamic属性。但是您在此处使用了两种方法简单表单方法反应性表单方法。如果您想使用FormGroup，我认为最好使用FormControlName指令而不是ngModel。或者，如果您想使用ngModel，我认为您不需要使用FormGroup。