咨询：如何在Angular Material Table行内添加按钮及相关功能

嘿，我来帮你搞定这个需求！把Reactive Form的数据导入Material Table，同时给每行加操作按钮实现弹窗和删除功能，其实核心就是在表格列里自定义操作单元格，再关联FormArray的操作逻辑。下面是一步步的具体实现：

1. 先搭好Reactive Form的基础结构 #

因为是多行数据，咱们用FormArray来存储每行的表单控件，这样能和Material Table的数据源完美绑定。

在组件类里定义表单：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
import { MatDialog } from '@angular/material/dialog';
// 假设你有个弹窗组件叫RowEditDialogComponent
import { RowEditDialogComponent } from './row-edit-dialog/row-edit-dialog.component';

@Component({
  selector: 'app-table-with-form',
  templateUrl: './table-with-form.component.html',
  styleUrls: ['./table-with-form.component.css']
})
export class TableWithFormComponent implements OnInit {
  // 主表单
  tableForm: FormGroup;
  // Material Table的列定义
  displayedColumns: string[] = ['name', 'email', 'actions'];

  constructor(private fb: FormBuilder, public dialog: MatDialog) {
    this.tableForm = this.fb.group({
      rows: this.fb.array([]) // 用FormArray存每行数据
    });
  }

  ngOnInit(): void {
    // 初始化一些测试数据（或者从后端获取后填充）
    this.addRow({ name: 'Alice', email: 'alice@example.com' });
    this.addRow({ name: 'Bob', email: 'bob@example.com' });
  }

  // 获取FormArray的快捷方式
  get rows(): FormArray {
    return this.tableForm.get('rows') as FormArray;
  }

  // 添加新行
  addRow(data?: {name: string, email: string}) {
    const rowForm = this.fb.group({
      name: [data?.name || ''],
      email: [data?.email || '']
    });
    this.rows.push(rowForm);
  }

  // 删除指定行
  deleteRow(index: number) {
    this.rows.removeAt(index);
  }

  // 打开编辑弹窗
  openEditDialog(index: number) {
    const rowForm = this.rows.at(index);
    const dialogRef = this.dialog.open(RowEditDialogComponent, {
      width: '400px',
      data: rowForm // 把当前行的FormGroup传给弹窗
    });

    dialogRef.afterClosed().subscribe(result => {
      if (result) {
        // 如果弹窗返回确认，可以做一些额外处理，比如保存到后端
        console.log('Row updated:', rowForm.value);
      }
    });
  }
}

2. 配置Material Table模板，添加操作列 #

在模板里，给mat-table添加自定义的actions列，里面放删除和编辑按钮，绑定对应的点击事件：

<form [formGroup]="tableForm">
  <mat-table [dataSource]="rows.controls">
    <!-- 姓名列 -->
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef> 姓名 </mat-header-cell>
      <mat-cell *matCellDef="let row; let i = index" [formGroup]="row">
        <input matInput formControlName="name" placeholder="姓名">
      </mat-cell>
    </ng-container>

    <!-- 邮箱列 -->
    <ng-container matColumnDef="email">
      <mat-header-cell *matHeaderCellDef> 邮箱 </mat-header-cell>
      <mat-cell *matCellDef="let row; let i = index" [formGroup]="row">
        <input matInput formControlName="email" placeholder="邮箱">
      </mat-cell>
    </ng-container>

    <!-- 操作列（核心部分） -->
    <ng-container matColumnDef="actions">
      <mat-header-cell *matHeaderCellDef> 操作 </mat-header-cell>
      <mat-cell *matCellDef="let row; let i = index">
        <!-- 编辑按钮，打开弹窗 -->
        <button mat-icon-button color="primary" (click)="openEditDialog(i)">
          <mat-icon>edit</mat-icon>
        </button>
        <!-- 删除按钮 -->
        <button mat-icon-button color="warn" (click)="deleteRow(i)">
          <mat-icon>delete</mat-icon>
        </button>
      </mat-cell>
    </ng-container>

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

  <!-- 添加新行按钮 -->
  <button mat-raised-button color="accent" (click)="addRow()">添加新行</button>
</form>

3. 简单实现弹窗组件（可选） #

如果需要编辑弹窗，创建一个简单的弹窗组件，接收父组件传递的FormGroup：

// row-edit-dialog.component.ts
import { Component, Inject } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';

@Component({
  selector: 'app-row-edit-dialog',
  templateUrl: './row-edit-dialog.component.html',
})
export class RowEditDialogComponent {
  constructor(
    public dialogRef: MatDialogRef<RowEditDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: FormGroup
  ) {}

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

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

弹窗模板：

<h2 mat-dialog-title>编辑行数据</h2>
<mat-dialog-content [formGroup]="data">
  <mat-form-field appearance="fill">
    <mat-label>姓名</mat-label>
    <input matInput formControlName="name">
  </mat-form-field>
  <mat-form-field appearance="fill">
    <mat-label>邮箱</mat-label>
    <input matInput formControlName="email">
  </mat-form-field>
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-button (click)="onCancel()">取消</button>
  <button mat-button color="primary" (click)="onSave()" [disabled]="data.invalid">保存</button>
</mat-dialog-actions>

关键要点说明 #

• 咱们直接把rows.controls（FormArray的控件数组）作为Material Table的dataSource，这样表单和表格数据完全同步，增删改都会自动刷新表格。
• 在操作列的mat-cell里，通过let i = index获取当前行的索引，然后传递给删除和弹窗方法，就能精准操作对应的行。
• 弹窗直接接收当前行的FormGroup，所以弹窗里的编辑会实时同步到原表单，不需要额外的状态同步逻辑。

这样整个流程就通了：Reactive Form的数据绑定到表格，行内按钮实现弹窗编辑和删除功能，所有数据操作都和表单联动，非常顺畅！

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