Двухстороннее связывание в * 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)
  }

Проблема здесь в том, что он не связывает входные данные и массив двумя способами. Когда я регистрирую массив после обновления входных данных, массив отображает элементы со всеми пустыми значениями.

Как связать массив элементов в Angular 5 с помощью * ngFor?

Answer 1

Проблема связана с массивом, изменения которого не обнаруживаются по ссылке.Вы можете внести следующие изменения -

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.Эта функция очень важна, иначе массив перестроит полный пользовательский интерфейс при любом изменении, и вы потеряете фокус от элемента.

trackIndex(index,item){
  return index;
}

Вот рабочая копия - https://stackblitz.com/edit/angular-pzdw6s