0

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

<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)]也生成类似于上面提到的东西（参见Angular 2 中的双向数据绑定）？

4

1 回答 1

1

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

更改您的代码，例如：

<div *ngFor="let model of models;let i = index"">
    <input [(ngModel)]="model.foo" name="foo{{i}}">
</div>
于 2017-06-21T14:21:39.267 回答