如何在 Angular 9 中使用 2 路绑定

Question

我试图将数组的每个项目绑定到文本框的[(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>第一种方法引发错误，它在角度 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

使用轨迹

在组件中：

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

如果不起作用，请告诉我