如何在 angular 2 中的 1 個屬性綁定中綁定 2 個變量？

Question

我正在嘗試從我的 json 數據動態生成和使用表單控件。 我想出一個簡單的實驗來找出我需要應用的機制，如下所示。

類中定義的變量

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

用於從demoA和demoB獲取屬性並轉換為FomControl

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]動態屬性的語法進行綁定。 但是您在這里混合了兩種方法，簡單形式方法與反應形式方法。 如果您想使用FormGroup我認為使用FormControlName指令而不是ngModel會更好。 或者，如果您想使用ngModel我認為您不需要將FormGroup與它一起使用。