Angular 8 中 *ngFor 中的 HTML 输入中的数据绑定答案

【问题标题】：Data binding in HTML input in *ngFor in Angular 8Angular 8 中 *ngFor 中的 HTML 输入中的数据绑定
【发布时间】：2023-03-30 10:31:01
【问题描述】：

我正在使用 *ngFor 循环遍历对象数组并在 HTML 中显示值。在 HTML 中，值显示在输入元素中，因为我希望用户在需要时更改值，然后使用保存按钮保存更改后的值。不幸的是，数据绑定根本不起作用。数组中的值未显示。这是我的代码：

<tr *ngFor="let data of rrReasons; let i = index;trackBy:trackByIndex;">
<td>
  <input type="number" name=a{{index}} [(ngModel)]="rrReasons[index].signatory1">
</td>

这是 json：

{ “签字人1”：“1009648”， “signatory2”：“1003444”， }

【问题讨论】：

向我们展示您尝试过的代码
使用数据变量代替 rrReasons[index]
不清楚你的数组在哪里？您发布了一个具有两个属性而不是数组的对象。
嘿Kurt，这个数组是一个Object数组，这个Object和我给的很相似
您正在迭代 rrReasons 并且您正在使用 [(ngModel)]="rrReasons[index].signatory1"，您应该改用您创建的 data 变量，如下所示 [(ngModel)]="data.signatory1"

标签： javascript html angular

【解决方案1】：

您正在使用rrReasons[index].signatory1。 index 不能作为循环内的变量使用。

您应该改用rrReasons[i].signatory1 或data.signatory1。

<table>
  <tr *ngFor="let data of rrReasons; let i = index;trackBy:trackByIndex;">
    <td>
      <input type="number" name=a{{i}} [(ngModel)]="rrReasons[i].signatory1">
    </td>
</table>

演示：https://stackblitz.com/edit/angular-zmscxv

【讨论】：

感谢 Kurt，演示看起来不错。我会在我的代码中尝试一下...

【解决方案2】：

你的 TS 代码应该是这样的

rrReasons = [{
    "signatory1": "1009648",
    "signatory2": "1003444",
  },
  {
    "signatory1": "1009649",
    "signatory2": "1003445",
  },
  {
    "signatory1": "1009650",
    "signatory2": "1003446",
  },
  {
    "signatory1": "1009651",
    "signatory2": "1003447",
  },
  {
    "signatory1": "1009652",
    "signatory2": "1003448",
  }
]

HTML 代码应该是这样的

<tr *ngFor="let data of rrReasons; let i = index;trackBy:trackByIndex;">
  <td>
    <input type="number" name=a{{index}} [(ngModel)]="data.signatory1">
  </td>
</tr>

注意：当你循环一个数组时，你必须使用迭代器值来获取实际的对象值。

工作示例：- Demo

【讨论】：

【解决方案3】：

您需要使用ngModel 进行双向数据绑定。它会自动使您的绑定保持同步。

我在这里创建了一个可以工作的 stackblitz 实例 - https://stackblitz.com/edit/angular-8kca94

您可以在此处阅读有关 NgModel 的信息 - https://angular.io/api/forms/NgModel

请在此处找到代码片段：

<div *ngFor="let element of arr">
  <input [value]="element.value" [name]="element.value" [(ngModel)]="element.value" />
</div>

打字稿代码在这里：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  arr = [
    {id: 1, value: 'value1'},
    {id: 2, value: 'value2'},
    ]
}

【讨论】：