Angular中如何将新增表格行的x-editable数据绑定到newAttr对象

看起来你遇到的核心问题是编辑内容后，无法将修改同步到数据源（data数组）以及newAttr对象中。这是因为你当前使用的是单向插值{{d.id}}，它只能显示数据，不能把编辑后的内容回写到对象属性里。下面是具体的解决方案：

1. 实现与数组对象的双向绑定 #

首先修改你的模板文件，把单向插值替换为[(ngModel)]双向绑定——这是Angular中实现数据同步的标准方式，x-editable组件（通常是ngx-editable）也支持这个指令。

修改后的app.component.html：

<table>
  <thead>
    <tr>
      <th>Id</th>
      <th>Name</th>
      <th>Rank</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let d of data">
      <!-- 使用双向绑定替代单向插值 -->
      <td><x-editable [(ngModel)]="d.id"></x-editable></td>
      <td><x-editable [(ngModel)]="d.name"></x-editable></td>
      <td><x-editable [(ngModel)]="d.rank"></x-editable></td>
    </tr>
  </tbody>
</table>
<br>
<button (click)="addStudent()">Add A Student</button>

2. 简化addStudent方法并关联newAttr #

你之前的newAttr处理有点冗余，因为对象是引用类型，直接把新增的学生对象推入data和newAttr后，编辑内容会自动同步到两个数组里的同一对象。修改后的app.component.ts：

import { Component, OnInit } from '@angular/core';
// 注意：Angular 4+ 推荐使用HttpClient替代Http，Http已被弃用
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  data: any = [];
  newAttr: any = []; // 用于存储所有新增的学生对象

  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.http.get('./assets/students.json').subscribe(data => {
      this.data = data['data'];
    });
  }

  addStudent() {
    // 创建一个带默认值的新学生对象，标记为新增（可选）
    const newStudent = { id: "", name: "", rank: "", isNew: true };
    this.data.push(newStudent);
    this.newAttr.push(newStudent); // 新增对象同时存入newAttr，编辑时自动同步
  }
}

为什么这样能解决问题？ #

• 双向绑定[(ngModel)]="d.id"会让x-editable的编辑结果直接更新data数组中对应对象的id属性；
• 因为newStudent是引用类型，推入data和newAttr后，两个数组指向同一个对象，所以编辑时newAttr里的对象也会同步更新；
• 替换Http为HttpClient是遵循Angular的最新规范，避免使用已弃用的API。

额外提示 #

如果你需要在某个时刻把所有新增/修改的数据提交到后端，直接遍历data或者newAttr数组即可，里面的属性已经是最新的编辑结果了。

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