Question

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

  ...

Answer 1

答案是使用Angular的Dynamic Forms

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

使用ngModel一般绑定值

1 个答案: