* ngFor元素数组上的两种方式绑定（非对象）

Question

我有一个简单的数组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中的元素数组？

Answer 1

问题出在未通过引用检测到其更改的Array。您可以进行以下更改-

html

<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

在ts文件中添加以下功能。此功能非常重要，否则数组将在发生任何更改时重新构建完整的UI，您将失去对elememt的关注。

trackIndex(index,item){
  return index;
}

这是工作副本-https://stackblitz.com/edit/angular-pzdw6s