Angular2 - ngModelをプロパティの参照にバインドする

Question

私はユーザー入力の長いリストを持っており、これらをHTMLで綴る代わりにオブジェクトに格納したいと考えています。これらの値を、ユーザー/顧客のデータを格納する別のオブジェクトにバインドします。 ngModelは、シンプルさと機能性のためにngModelを使用することをお勧めします。

どのように私はこれを達成することができますか？

以下の例（機能しない）。サポートされていない

@Component({ 
    template: ` 
    <div> 
     <h2>NgModel Example</h2> 
     <div *ngFor="let input of inputList"> 
     {{ input.label }} <input type="text" [(ngModel)]="input.bindTo"> 
     </div> 
    </div> 

    <p>This is not working: {{customerInfo.name}}, {{customerInfo.email}}</p> 
    `, 
    directives: [...] 
}) 

export class AppComponent { 
    inputList = [ 
    { 
     label: "Enter your name", 
     bindTo: this.customerInfo.name // also tried 'customerInfo.name' 
    }, 
    { 
     label: "Enter your email", 
     bindTo: this.customerInfo.email 
    } 
    ] 

    customerInfo = { 
    name: 'test', 
    email: '' 
    } 
} 

Answer 1

。 ngModelは、コンポーネントのプロパティにのみバインドできます。私はまた、ヘルパーメソッドなしでテンプレートから文字列リテラルでコンポーネントのプロパティを参照する方法が表示されない：

これはあなたのために働くかもしれない：

<div *ngFor="#input of inputList"> 
    {{ input.label }} 
    <input type="text" 
     [ngModel]="getProp(input.bindTo)" 
     (ngModelChange)="setProp(input.bindTo, $event)"> 
    </div> 

inputList = [ 
    { 
     label: "Enter your name", 
     bindTo: "name" 
    }, 
    { 
     label: "Enter your email", 
     bindTo: "email" 
    } 
    ]; 

    getProp(prop) { 
    return this[prop]; 
    } 

    setProp(prop, value) { 
    this[prop] = value; 
    } 

<div *ngFor="#input of inputList; #i = index"> 
    {{ input.label }} <input type="text" [(ngModel)]="inputList[i]"> 
    </div> 

ヒント => RC.0 はletに置き換えます。