Question

我想通过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)]不应该生成类似于上面提到的内容（请参阅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双向绑定不起作用

问题

1 个答案: