Angular11表格循环渲染输入框绑定数据异常求助

问题核心原因 #

你遇到的所有输入框显示最后一行数据的问题，本质是循环中输入框的ngModel绑定到了组件级的共享变量，而非当前数组项的对应属性。所有输入框共享同一个数据源，循环结束后变量被最后一行数据覆盖，导致全部显示最后一个值。替换ngModel后无法显示数据，大概率是绑定路径错误或缺少必要模块依赖。

正确实现方式 #

1. 确保ngModel绑定到循环项的属性 #

直接将输入框的双向绑定指向当前迭代的数组对象属性，而非单独的组件变量：

正确的HTML代码

<table>
  <!-- 用trackBy优化性能并避免绑定异常 -->
  <tr *ngFor="let rate of rateList; trackBy: trackByItem">
    <td>
      <input type="date" [(ngModel)]="rate.DataRata" />
    </td>
    <td>
      <input type="number" [(ngModel)]="rate.ImportoRata" />
    </td>
  </tr>
</table>

对应的TypeScript代码

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  // 示例数据，确保每个对象包含DataRata和ImportoRata属性
  rateList = [
    { DataRata: '2024-01-15', ImportoRata: 500 },
    { DataRata: '2024-02-15', ImportoRata: 500 },
    { DataRata: '2024-03-15', ImportoRata: 500 }
  ];

  // trackBy函数帮助Angular追踪数组项，避免不必要的DOM重渲染
  trackByItem(index: number, item: any): number {
    return item.id || index; // 若有唯一id用id，否则用索引
  }
}

2. 必要的模块依赖检查 #

确保你的模块（通常是AppModule或当前组件所在的模块）已经导入了FormsModule，否则ngModel无法正常工作：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // 必须导入

import { YourComponent } from './your-component.component';

@NgModule({
  imports: [BrowserModule, FormsModule], // 添加FormsModule
  declarations: [YourComponent],
  bootstrap: [YourComponent]
})
export class AppModule { }

常见错误排查 #

• 避免绑定到全局变量：不要在循环中把ngModel绑定到组件定义的dataRata、importoRata这类单一变量，否则所有输入框会共享同一个值。
• 检查数组属性名：确保rateList中的对象属性名和模板中绑定的DataRata、ImportoRata完全一致（区分大小写）。
• 异步数据处理：如果rateList是异步加载的，建议用*ngIf="rateList"包裹表格，避免数据未加载时的绑定错误：

<table *ngIf="rateList">
  <!-- 循环内容 -->
</table>

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