角度2の1つのプロパティバインディング内に2つの変数をバインドする方法はありますか？

Question

jsonデータからフォームコントロールを動的に生成して使用しようとしています。私が適用する必要がある力学を理解するために思い描いた簡単な実験は次のようになります。今demoCの値が

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

によるもので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); 
} 

に変換するためのクラス

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

関数で定義され

変数事実そのもの私のコンポーネント負荷が、私はこの

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

のような入力何かに結合内のそれに特異的に結合することができるかどうか疑問に私を導いた私がそれに結合するための事前に定義された方法、ありませんときtは私がその場でこれを作成しています 動作しませんでした当然の

、どちらも私は結果は私がこれをやって行くにはどうすればよいdemoC.nameになりたい場合は

<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]]"> 

をしましたか？

Answer 1

なぜ{{}}の構文ですか？ 動的プロパティの場合は[(ngModel)]=demoC[demoA]の構文を使用して簡単にバインドできます。しかし、あなたはここで2つのアプローチを混ぜ合わせました。アプローチ対Reactive Formアプローチ。 FormGroupと作業したい場合は、ngModelの代わりにFormControlNameディレクティブを使用する方が良いと思います。または、ngModelを使用する場合は、FormGroupを使用する必要はありません。