使用 ngModel 通用绑定值答案

【问题标题】：Generically Binding Values with ngModel使用 ngModel 通用绑定值
【发布时间】：2017-02-17 05:54:27
【问题描述】：

我刚刚学习 Angular 2，我一直无法解决的一个问题是使用 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());
  }

  ...

【问题讨论】：

标签： angular angular-ngmodel angular-pipe

【解决方案1】：

答案是使用Angular的Dynamic Forms

您还可以利用某些库，例如 PrimeFaces 的 PrimeNG 的可编辑数据表，我强烈推荐！

【讨论】：