Html 如何在第九章中使用双向装订

我试图将数组的每个项绑定到文本框的[（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>



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




第一次进近发射错误，在角度7中工作正常：
无法将变量“item”用作赋值表达式的左侧。模板变量是只读的

component.html[第二种方法]


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



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




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

有人能为我提供一个完美的方法来处理类似的场景吗？
使用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演示链接：

如果它不工作，请告诉我
生成堆栈Blitz您希望它如何显示在文本框中。如果它是一个逗号分隔的值列表，我会使用arr.join（“，”）并将此值设置为绑定变量，然后在需要数组时在控制器中使用myVar.split（“，”）。我应该能够通过文本框更改数组中每个项的值。您可以使用此方法进行更改，可能还可以使用trim（）去掉whitspace，如果有的话，很高兴听到兄弟。