Angular循环输入框绑定异常：所有输入框显示最后一条数据

拥有一个名为measurments的对象数组，希望遍历该数组将每个对象绑定到输入框以支持修改操作，但所有输入框均显示数据库中添加的最后一条数据。控制台能正常打印每条数据，但输入框无法正确渲染对应内容。

原TypeScript代码 #

measurementModel: Measurment = new Measurment;

measurments: Measurment[] = [];

ngOnInit(): void {
    this.measurementService.getAllMeasurements().subscribe(
      (data: Measurment[])=>
      {
        this.measurments = data;
        for (let i = 0; i < this.measurments.length; i++) {
          this.measurementModel = this.measurments[i];
          console.log(data[i]);
          
        }
      }
    )
}

原HTML代码 #

<div class="card-header"> 
        Measurements
      </div>
      <form (ngSubmit)="createMeasurement(measurementsForm)" #measurementsForm="ngForm">
        <div class="input-group" *ngFor="let  measurment of measurments">
          <input 
          type="number" 
          class="form-control"
          name="inches"
          step=".01"
          #inches="ngModel"
          [ngModel]="measurementModel.inches"
          (ngModelChange)="measurementModel.inches = $event"
          >
          <input 
          type="number" 
          class="form-control"
          name="cm"
          step=".01"
          #cm="ngModel"
          [ngModel]="measurementModel.cm"
          (ngModelChange)="measurementModel.cm = $event"
          >
          <div class="input-group-append" id="button-addon4">
            <button class="btn btn-outline-info" type="submit">UPDATE</button>
            <button class="btn btn-outline-danger" type="button">DELETE</button>
          </div>
        </div>
      </form>

核心问题 #

TS中通过循环将measurementModel依次赋值为数组元素，循环结束后该变量最终指向数组最后一个元素，而HTML中所有输入框都绑定了这个变量，导致全部显示最后一条数据。同时，循环生成的输入框name属性重复，Angular表单会出现绑定冲突。

修改步骤 #

1. 移除TS中无用的循环赋值逻辑，不需要单独维护measurementModel变量，直接使用*ngFor遍历出的对象。
2. 将HTML中输入框的绑定对象从measurementModel替换为当前循环的measurment。
3. 通过index给每个输入框的name添加后缀，确保属性唯一，避免表单冲突。

修改后的代码 #

TypeScript代码

// 移除不需要的measurementModel变量
measurments: Measurment[] = [];

ngOnInit(): void {
    this.measurementService.getAllMeasurements().subscribe(
      (data: Measurment[])=>
      {
        this.measurments = data;
        // 移除原循环赋值逻辑
      }
    )
}

HTML代码

<div class="card-header"> 
  Measurements
</div>
<form #measurementsForm="ngForm">
  <!-- 使用index确保每个输入框name唯一 -->
  <div class="input-group" *ngFor="let measurment of measurments; let i = index">
    <input 
      type="number" 
      class="form-control"
      name="inches-{{i}}"
      step=".01"
      #inches="ngModel"
      [(ngModel)]="measurment.inches"
    >
    <input 
      type="number" 
      class="form-control"
      name="cm-{{i}}"
      step=".01"
      #cm="ngModel"
      [(ngModel)]="measurment.cm"
    >
    <div class="input-group-append" id="button-addon4">
      <!-- 将当前对象传入方法，方便单独处理更新/删除 -->
      <button class="btn btn-outline-info" type="button" (click)="updateMeasurement(measurment)">UPDATE</button>
      <button class="btn btn-outline-danger" type="button" (click)="deleteMeasurement(measurment)">DELETE</button>
    </div>
  </div>
</form>

额外说明 #

• 使用[(ngModel)]双向绑定替代分开的[ngModel]和(ngModelChange)，代码更简洁。
• 将原提交按钮的type="submit"改为type="button"并绑定click事件，因为单个对象的更新不需要提交整个表单，直接针对当前对象操作即可。

内容的提问来源于stack exchange，提问作者Bea