Angular Material数据表内联编辑及动态行实现咨询与示例请求

当然可以实现！Angular Material数据表完全支持内联编辑，包括指定列默认可编辑以及动态行的场景，我平时做项目经常用到这个方案，下面一步步给你说明并提供完整的可运行示例代码。

内联编辑的本质是动态切换单元格的显示模式：默认显示文本，编辑状态下切换为输入框（或其他表单控件），通过双向数据绑定实时更新数据源。针对你的需求：

• 指定列（比如Email）默认可编辑：初始化时直接把该列所有单元格设为编辑状态
• 动态行：通过数组维护数据表的数据源，添加/删除行时直接操作数组，Angular Material会自动更新视图

首先确保你已经导入了Angular Material的必要模块（在你的模块文件中）：

import { NgModule } from '@angular/core';
import { MatTableModule } from '@angular/material/table';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    MatTableModule,
    MatInputModule,
    MatButtonModule,
    FormsModule // 用于双向数据绑定
  ]
})
export class YourModule { }

1. 组件逻辑代码（table-inline-edit.component.ts） #

import { Component } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';

// 定义数据接口
interface User {
  id: number;
  name: string;
  email: string;
}

@Component({
  selector: 'app-table-inline-edit',
  templateUrl: './table-inline-edit.component.html',
  styleUrls: ['./table-inline-edit.component.css']
})
export class TableInlineEditComponent {
  // 显示的列名
  displayedColumns: string[] = ['id', 'name', 'email', 'actions'];
  // 数据源
  dataSource = new MatTableDataSource<User>([
    { id: 1, name: 'Alice Smith', email: 'alice@example.com' },
    { id: 2, name: 'Bob Johnson', email: 'bob@example.com' }
  ]);
  // 记录每个单元格的编辑状态，键格式：`${row.id}-${column}`
  editStates: { [key: string]: boolean } = {};

  constructor() {
    // 初始化：将Email列的所有单元格设为可编辑状态
    this.dataSource.data.forEach(row => {
      this.editStates[`${row.id}-email`] = true;
    });
  }

  // 进入编辑状态
  startEdit(row: User, column: string) {
    this.editStates[`${row.id}-${column}`] = true;
  }

  // 保存编辑
  saveEdit(row: User, column: string) {
    this.editStates[`${row.id}-${column}`] = false;
    // 这里可以添加调用后端API保存数据的逻辑
    console.log(`保存行${row.id}的${column}字段:`, row[column as keyof User]);
  }

  // 取消编辑，恢复原数据（如果需要的话）
  cancelEdit(row: User, column: string) {
    this.editStates[`${row.id}-${column}`] = false;
    // 如果需要恢复初始值，可以在这里重置row[column]
  }

  // 添加新行
  addRow() {
    const newId = Math.max(...this.dataSource.data.map(row => row.id)) + 1;
    const newRow: User = { id: newId, name: '', email: '' };
    this.dataSource.data.push(newRow);
    // 新行的Email列默认设为可编辑
    this.editStates[`${newId}-email`] = true;
    // 通知数据源更新
    this.dataSource._updateChangeSubscription();
  }

  // 删除行
  deleteRow(row: User) {
    const index = this.dataSource.data.findIndex(u => u.id === row.id);
    if (index !== -1) {
      this.dataSource.data.splice(index, 1);
      delete this.editStates[`${row.id}-name`];
      delete this.editStates[`${row.id}-email`];
      this.dataSource._updateChangeSubscription();
    }
  }
}

2. 模板代码（table-inline-edit.component.html） #

<div class="table-container">
  <button mat-raised-button color="primary" (click)="addRow()" style="margin-bottom: 16px;">
    添加新行
  </button>

  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
    <!-- ID列 -->
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef> ID </th>
      <td mat-cell *matCellDef="let row"> {{row.id}} </td>
    </ng-container>

    <!-- Name列 -->
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef> 姓名 </th>
      <td mat-cell *matCellDef="let row">
        <ng-container *ngIf="!editStates[`${row.id}-name`]; else editName">
          {{row.name}}
          <button mat-icon-button (click)="startEdit(row, 'name')">
            <mat-icon>edit</mat-icon>
          </button>
        </ng-container>
        <ng-template #editName>
          <input matInput [(ngModel)]="row.name" />
          <button mat-icon-button color="primary" (click)="saveEdit(row, 'name')">
            <mat-icon>check</mat-icon>
          </button>
          <button mat-icon-button color="warn" (click)="cancelEdit(row, 'name')">
            <mat-icon>close</mat-icon>
          </button>
        </ng-template>
      </td>
    </ng-container>

    <!-- Email列（默认可编辑） -->
    <ng-container matColumnDef="email">
      <th mat-header-cell *matHeaderCellDef> 邮箱 </th>
      <td mat-cell *matCellDef="let row">
        <ng-container *ngIf="!editStates[`${row.id}-email`]; else editEmail">
          {{row.email}}
          <button mat-icon-button (click)="startEdit(row, 'email')">
            <mat-icon>edit</mat-icon>
          </button>
        </ng-container>
        <ng-template #editEmail>
          <input matInput [(ngModel)]="row.email" />
          <button mat-icon-button color="primary" (click)="saveEdit(row, 'email')">
            <mat-icon>check</mat-icon>
          </button>
          <button mat-icon-button color="warn" (click)="cancelEdit(row, 'email')">
            <mat-icon>close</mat-icon>
          </button>
        </ng-template>
      </td>
    </ng-container>

    <!-- 操作列 -->
    <ng-container matColumnDef="actions">
      <th mat-header-cell *matHeaderCellDef> 操作 </th>
      <td mat-cell *matCellDef="let row">
        <button mat-icon-button color="warn" (click)="deleteRow(row)">
          <mat-icon>delete</mat-icon>
        </button>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
</div>

3. 样式代码（table-inline-edit.component.css） #

.table-container {
  margin: 20px;
}

table {
  width: 100%;
}

mat-cell input {
  width: 90%;
  border: none;
  outline: none;
}

mat-icon-button {
  margin-left: 8px;
}

• 编辑状态管理：用editStates对象精准控制每个单元格的编辑状态，键采用行ID-列名的格式，避免不同行/列的状态冲突
• 指定列默认可编辑：在组件构造函数中遍历初始数据，将Email列的所有行标记为编辑状态
• 动态行处理：添加/删除行后调用_updateChangeSubscription()通知数据源更新，确保视图同步刷新
• 数据持久化：示例中saveEdit方法只是打印日志，实际项目中可以在这里调用后端API，将修改后的数据保存到数据库

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