如何在 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) {&nbsp; &nbsp; return index;&nbsp; }在html中：<div class="row" *ngFor="let item of arr; let i = index ; trackBy:trackByFn">&nbsp; &nbsp; &nbsp; <div class="col-12">&nbsp; &nbsp; &nbsp; &nbsp; <input type="text" [(ngModel)]="arr[i]">&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp;stackblitz 演示链接： https://stackblitz.com/edit/angular-cwyrs9如果不起作用，请告诉我