Angular技术问题：mat-table文本框无法加载数据库SQL数据

嘿，我懂你现在的困扰——mat-table里的编辑文本框没法正确显示对应行的数据对吧？看了你的代码片段，问题出在ngModel的绑定对象上，咱们一步步来搞定：

问题根源 #

你当前用的是 [(ngModel)]="model.test"，这意味着所有行的输入框都绑定到了同一个全局的model.test变量，而不是当前行的row.test数据。这样一来，输入框自然没法加载每一行独有的内容。

修复方案 #

1. 修正ngModel绑定到当前行 #

把输入框的ngModel直接绑定到循环中的row.test，这样每一行的输入框就对应自己行的数据了：

<ng-container matColumnDef="test">
  <mat-header-cell *matHeaderCellDef mat-sort-header> test </mat-header-cell>
  <mat-cell *matCellDef="let row">
    <input 
      type="text" 
      [(ngModel)]="row.test" 
      name="test-{{row.id}}"  <!-- 添加行唯一标识避免name重复 -->
      id="test-{{row.id}}"    <!-- 添加行唯一标识避免id重复 -->
    >
    <!-- 如果你不需要同时显示原始值，可以删掉下面的{{row.test}} -->
    {{row.test}}
  </mat-cell>
</ng-container>

2. 额外注意事项 #

• 避免重复的name/id：因为mat-table的行是循环生成的，每个输入框的name和id必须唯一，否则可能导致表单校验或DOM操作出问题，所以加上row.id（或者你的数据里的唯一字段）来区分。
• 确保行数据可修改：如果你的row是从数据库获取的不可变对象（比如通过HTTP请求返回的冻结对象），可能需要先深拷贝一份再绑定，比如在数据加载时做：

  // 假设你从API获取到的数据是data数组
  this.dataSource.data = data.map(item => ({...item})); // 浅拷贝，如果有嵌套对象用深拷贝工具
  

• 更新数据库的触发：当用户修改完内容后，你可以通过监听输入框的(blur)事件或者添加一个保存按钮，拿到修改后的row对象，调用你的更新接口：

  <input 
    type="text" 
    [(ngModel)]="row.test" 
    name="test-{{row.id}}" 
    id="test-{{row.id}}"
    (blur)="updateRow(row)"  <!-- 失去焦点时触发更新 -->
  >
  

  然后在组件里实现updateRow方法：

  updateRow(row: YourDataType) {
    // 调用你的数据库更新API，比如：
    this.yourService.updateTest(row.id, row.test).subscribe({
      next: () => console.log('更新成功'),
      error: (err) => console.error('更新失败', err)
    });
  }
  

这样修改后，你的文本框就能正确加载每一行的test数据，并且用户修改后也能同步到对应的row对象里，方便后续更新数据库~

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