0

我刚刚学习 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());
  }

  ...
4

1 回答 1

0

答案是使用 Angular 的动态表单

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

于 2017-02-22T22:36:40.223 回答