html - 如何在 Angular 9 中使用 2 向绑定(bind)

Question

我正在尝试将数组的每个项目绑定(bind)到文本框的 [(ngModel)]。

组件.ts arr:string[] = ["",""];
component.html [第一种方法]

    <div class="row" *ngFor="let item of arr;">
      <div class="col-12">
        <input type="text" [(ngModel)]="item">
      </div>
    </div>

第一种方法引发错误，它在 Angular 7 中工作正常:
不能将变量“item”用作赋值表达式的左侧。模板变量是只读的。

component.html [第二种方法]

    <div class="row" *ngFor="let item of arr; let i = index">
      <div class="col-12">
        <input type="text" [(ngModel)]="arr[i]">
      </div>
    </div> 

第二种方法有效，但输入:输入单个字母后文本框失去焦点。

有人可以为我提供类似情况的完美方法吗？

Answer 1

使用 trackby

在评论中:

trackByFn(index: any, item: any) {
    return index;
  }

在 html 中:

<div class="row" *ngFor="let item of arr; let i = index ; trackBy:trackByFn">
      <div class="col-12">
        <input type="text" [(ngModel)]="arr[i]">
      </div>
    </div> 

演示的 stackblitz 链接:
https://stackblitz.com/edit/angular-cwyrs9

如果它不起作用，请告诉我