如何在 Angular 9 中使用 2 向绑定答案

【问题标题】：how to use 2-way binding in angular 9如何在 Angular 9 中使用 2 向绑定
【发布时间】：2020-07-11 16:35:31
【问题描述】：

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

component.ts arr:string[] = ["",""];

component.html [第一种方法]


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

First Approach 引发错误，它在 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>

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

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

【问题讨论】：

制作一个堆栈闪电战
您希望它如何显示在文本框中。如果它是逗号分隔的值列表，我会使用 arr.join(", ") 并将此值设置为绑定变量，然后在需要数组时在控制器中使用 myVar.split(',') 。
我应该能够通过文本框更改数组中每个项目的值
你可以使用这个方法来做到这一点，如果有的话，还可以使用 trim() 来观察空白空间。

标签： html angular

【解决方案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

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

【讨论】：

很高兴听到兄弟。