我想通过 将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 中的双向数据绑定)?
该name
属性在*ngFor
循环内必须是唯一的。,您可以使用index
.
更改您的代码,如:
<div *ngFor="let model of models;let i = index"">
<input [(ngModel)]="model.foo" name="foo{{i}}">
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句