Angular2 ngModel 双向绑定不起作用

Question

我想通过 ngModel 将 ngFor 循环内的模型绑定到输入字段，但如果我将另一个项目添加到列表中，模型的值将在模型中可见，但不在视图中。

<div *ngFor="let model of models">
    <input [(ngModel)]="model.foo" name="foo">
    {{model | json}}
</div>
<button (click)="addEmptyListItem()">add</button>

如果我在视图中输入 bar model | json 将显示 { 'foo': 'bar' }，现在如果我向列表添加另一个元素 model | json 仍将显示 { 'foo': 'bar' }，但在输入字段中没有任何内容可见。

我的 models 变量来自 BehaviorSubject

private $models: BehaviorSubject<Model[]> = new BehaviorSubject([]);
get models(): Model[] { return this.$models.getValue(); }

public addEmptyListItem(): void { 
    let models = this.models();
    models.push(new Model());
    this.$models.next(models);
}

其中包含 Model

的列表

export class Model { public foo: string; }

现在，如果我将 [(ngModel)]="model.foo" name="foo" 与 [value]="model.foo" (input)="model.foo = $event.target.value" 交换：

<div *ngFor="let model of models">
    <input [value]="model.foo" (input)="model.foo = $event.target.value">
    {{model | json}}
</div>
<button (click)="addEmptyListItem()">add</button>

视图得到正确更新。

问题

有什么我忽略了为什么 [(ngModel)] 不起作用吗？

难道 [(ngModel)] 不应该也生成类似于上面提到的内容（参见 Two-way data binding in Angular 2）吗？

Answer 1

name 属性在 *ngFor 循环中必须是唯一的，您可以使用 index.

将您的代码更改为：

<div *ngFor="let model of models;let i = index"">
    <input [(ngModel)]="model.foo" name="foo{{i}}">
</div>

Angular2 ngModel 双向绑定不起作用

Angular2 ngModel two way binding does not work

angular

2-way-object-databinding

ngmodel

问题