angular - ngModel で値を一般的にバインドする

Question

私は Angular 2 を学んでいますが、取り組むことができなかった 1 つの問題は、バインドしている属性の名前を静的に指定せずに ngModel でフォームを作成することです。

この問題を克服するためのメカニズム (十分に一般的であることは確かですが) や、コミュニティ内でどのように言及されているかはわかりません。

テンプレートにはキーと値が表示されますが、保存時に更新が反映されません。動的な方法で属性を参照すると、バインディングが失われるようです。(データをパイプする前に、バインドされた属性を評価していますか?)

これが私が立ち往生している場所です：

テンプレート：

<table class="table table-responsive">
  <tr *ngFor="let prop of account | keyValues">
    <td>{{ prop.key }}</td>

    // Problem here:
    // if I have [(ngModel)]="prop.key", it only displays the keys
    // if I sub in a static attribute e.g. [(ngModel)]="account.accountName" it works
    <td><input name="{{prop.key}}"  [(ngModel)]="prop.value" /></td>
  </tr>
</table>

パイプ：

@Pipe({
    name: 'keyValues'
})
@Injectable()
export class KeysPipe implements PipeTransform {
  transform(value, args:string[]) : any {
    let keys = [];
    for (let key in value) {
      keys.push({key: key, value: value[key]});
    }
    return keys;
  }
}

成分：

  ... boiler plate ...

  save(): void {
    this.accountsService.update(this.account)
      .then(() => this.goBack());
  }

  ...