我有一个简单的数组tags = [];
,并且正在使用addNew()
在this.tags.push("");
上推送空白元素。它将在该数组中创建空白元素。
现在,我正在使用此数组添加要从输入中添加的多个项目
<div class="row tagEntry" *ngFor="let tag of tags, let i = index">
<div class="col-md-10">
<input type="text" name="tag-{{i}}" placeholder="Tag Name" [(ngModel)]="tag" class="form-control">
</div>
<div class="col-md-2">
<button class="btn btn-block btn-danger" (click)="removeTag(i)"><i class="fa fa-trash"></i></button>
</div>
</div>
我的TS文件:
todoDesc: string = '';
tags = [];
ngOnInit() {
}
addTag () {
this.tags.push("");
console.log(this.tags)
}
removeTag (index) {
this.tags.splice(index, 1);
}
addTodo () {
console.log(this.todoDesc, this.tags)
}
问题在这里,它不是以两种方式绑定输入和数组。当我在更新输入后记录数组时,该数组会显示所有空白值的项目。
如何使用* ngFor通过两种方式绑定Angular 5中的元素数组?
答案 0 :(得分:3)
问题出在未通过引用检测到其更改的Array。您可以进行以下更改-
<div class="row tagEntry" *ngFor="let tag of tags; let i = index; trackBy:trackIndex">
<div class="col-md-10">
<input type="text" placeholder="Tag Name" [(ngModel)]="tags[i]" class="form-control">
</div>
<div class="col-md-2">
<button class="btn btn-block btn-danger" (click)="removeTag(i)"><i class="fa fa-trash"></i></button>
</div>
</div>
在ts文件中添加以下功能。此功能非常重要,否则数组将在发生任何更改时重新构建完整的UI,您将失去对elememt的关注。
trackIndex(index,item){
return index;
}