组件模型:
private SomeArray = [{ key: "Initial" }];
Run Code Online (Sandbox Code Playgroud)
用户可以动态添加/删除项目:
addField() {
this.SomeArray.push({ key: Math.random().toString() });
}
removeField(index: number) {
this.SomeArray.splice(index, 1);
}
Run Code Online (Sandbox Code Playgroud)
模板标记:
<div class="col-xs-12">
<button (click)="addField()" type="button">Add</button>
</div>
<div *ngFor="let field of SomeArray; let i = index;">
<input [(ngModel)]="field.key" #modelField="ngModel" [name]=" 'SomeArray['+i+'].key' " type="text" class="form-control" required />
<div [hidden]="modelField.pristine || !(modelField.errors && modelField.errors.required)" class="alert alert-danger">
Required error
</div>
<button (click)="removeField(i)" class="btn btn-danger">Remove</button>
</div>
Run Code Online (Sandbox Code Playgroud)
在用户从中删除任何项目之前,此方法一直有效SomeArray。如果我最初添加了两个项目:

并删除索引为1的索引:
然后在添加另一个项目Angular之后,将其视为项目同时具有0和1索引(新项目“占用”两个输入):
(不显示键为0.1345 ...的项目)
值得注意的SomeArray是预期的项目,但是数据绑定失败。可能是什么原因呢?
更新:感谢@Stefan Svrkota和@ AJT_82的评论,据我所知,可以通过添加[ngModelOptions]="{standalone: true}" …