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

Question

我有一个简单的数组 tags = [];，我正在使用 this.tags.push(""); 在 addNew() 上推送空白元素。它在该数组中创建空白元素。

现在，我正在使用此数组添加要从输入中添加的多个项目

<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，并且您将失去元素的焦点。

trackIndex(index,item){
  return index;
}

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

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

Two way binding in *ngFor on Array of elements(non-object)

arrays

angular

angular5

html

ts