如何将数组中每个对象设为独立元素以在Angular表格中编辑

核心原理 #

数组里的对象属于引用类型，只要修改对象属性或替换数组中对应元素，表格会自动更新（若使用MatTableDataSource，更新后表格会自动渲染）。下面提供两种常用实现方案：

方案一：弹窗编辑（适合复杂编辑场景） #

1. 修改编辑按钮，传递当前行元素 #

把HTML中按钮的openDialog()改为openDialog(element)，让弹窗能获取到要编辑的目标对象：

<ng-container matColumnDef="actions">
  <th mat-header-cell *matHeaderCellDef> Actions </th>
  <td mat-cell *matCellDef="let element">
    <button (click)="openDialog(element)" mat-mini-fab color="primary" aria-label="Edit">
      <mat-icon>edit</mat-icon>
    </button>
  </td>
</ng-container>

2. 创建编辑弹窗组件 #

生成一个弹窗组件（例如EditEmployeeDialogComponent），用于展示编辑表单：

弹窗HTML（edit-employee-dialog.component.html）

<h2 mat-dialog-title>编辑员工信息</h2>
<mat-dialog-content>
  <mat-form-field appearance="fill" class="full-width">
    <mat-label>名字</mat-label>
    <input matInput [(ngModel)]="data.first_name" required>
  </mat-form-field>
  <mat-form-field appearance="fill" class="full-width">
    <mat-label>姓氏</mat-label>
    <input matInput [(ngModel)]="data.last_name" required>
  </mat-form-field>
  <mat-form-field appearance="fill" class="full-width">
    <mat-label>工号</mat-label>
    <input matInput type="number" [(ngModel)]="data.jobNumber" required>
  </mat-form-field>
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-button (click)="onCancel()">取消</button>
  <button mat-button (click)="onSave()" color="primary">保存</button>
</mat-dialog-actions>

弹窗TS（edit-employee-dialog.component.ts）

import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';

@Component({
  selector: 'app-edit-employee-dialog',
  templateUrl: './edit-employee-dialog.component.html',
  styles: [`.full-width { width: 100%; margin-bottom: 16px; }`]
})
export class EditEmployeeDialogComponent {
  constructor(
    private dialogRef: MatDialogRef<EditEmployeeDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {}

  onSave(): void {
    this.dialogRef.close(this.data);
  }

  onCancel(): void {
    this.dialogRef.close();
  }
}

3. 主组件处理弹窗逻辑 #

在主组件TS中实现openDialog方法，接收弹窗返回的修改后数据并更新原数组：

import { MatDialog } from '@angular/material/dialog';
import { EditEmployeeDialogComponent } from './edit-employee-dialog/edit-employee-dialog.component';
import { MatTableDataSource } from '@angular/material/table';

// 用MatTableDataSource管理数据源，更方便表格操作
dataSource = new MatTableDataSource<any>([]);
dataFromQuery: any;

constructor(private dialog: MatDialog) {}

getDataFromAPi(){
  this.service.showDataToClient().subscribe((response) => {
    this.dataFromQuery = response;
    this.dataSource.data = this.dataFromQuery.result; // 赋值给表格数据源
  }, (error) => {
    console.log("error", error)
  })
}

openDialog(element: any): void {
  // 深拷贝原对象，避免弹窗未保存就修改原数据
  const dialogRef = this.dialog.open(EditEmployeeDialogComponent, {
    width: '350px',
    data: { ...element }
  });

  dialogRef.afterClosed().subscribe(result => {
    if (result) {
      // 用工号作为唯一标识，找到原数组中对应元素的索引
      const index = this.dataFromQuery.result.findIndex(item => item.jobNumber === result.jobNumber);
      if (index !== -1) {
        // 替换原数组中的元素
        this.dataFromQuery.result[index] = result;
        // 更新表格数据源，触发渲染
        this.dataSource.data = [...this.dataFromQuery.result];
      }
    }
  });
}

4. 模块配置 #

在app.module.ts中导入并声明弹窗组件，同时引入FormsModule用于双向绑定：

import { FormsModule } from '@angular/forms';
import { EditEmployeeDialogComponent } from './edit-employee-dialog/edit-employee-dialog.component';
import { MatDialogModule } from '@angular/material/dialog';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';

@NgModule({
  declarations: [
    // ...其他组件
    EditEmployeeDialogComponent
  ],
  imports: [
    // ...其他模块
    FormsModule,
    MatDialogModule,
    MatFormFieldModule,
    MatInputModule
  ]
})
export class AppModule {}

方案二：行内直接编辑（适合简单场景） #

如果不需要弹窗，直接在表格中修改数据，只需将静态文本替换为双向绑定的输入框：

1. 修改表格列HTML #

<ng-container matColumnDef="first_name">
  <th mat-header-cell *matHeaderCellDef>First Name</th>
  <td mat-cell *matCellDef="let element"> 
    <input matInput [(ngModel)]="element.first_name" placeholder="First Name">
  </td>
</ng-container>

<ng-container matColumnDef="last_name">
  <th mat-header-cell *matHeaderCellDef>Last Name </th>
  <td mat-cell *matCellDef="let element"> 
    <input matInput [(ngModel)]="element.last_name" placeholder="Last Name">
  </td>
</ng-container>

<ng-container matColumnDef="job_Number">
  <th mat-header-cell *matHeaderCellDef> Job Number </th>
  <td mat-cell *matCellDef="let element"> 
    <input matInput type="number" [(ngModel)]="element.jobNumber" placeholder="Job Number">
  </td>
</ng-container>

2. 导入FormsModule #

同样需要在模块中导入FormsModule才能使用ngModel双向绑定。

这种方式下，修改输入框内容会直接同步到数组中的对象，表格会实时显示修改结果。

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