要实现一个可编辑的表格，你可以使用Angular Material和Angular Forms来创建一个表单，然后使用Angular Material表格来显示数据。

首先，确保你已经安装了Angular Material和Angular Forms，并将它们添加到你的项目中。

在你的组件文件中，导入所需的模块和组件：

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { MatTableDataSource } from '@angular/material/table';

接下来，在组件类中定义表格的数据和表单控件：

@Component({
  selector: 'app-editable-table',
  templateUrl: './editable-table.component.html',
  styleUrls: ['./editable-table.component.css']
})
export class EditableTableComponent implements OnInit {
  // 定义表格的列名和数据
  displayedColumns: string[] = ['name', 'email', 'phone'];
  dataSource: MatTableDataSource;

  // 定义表单控件
  form: FormGroup;

  constructor() {
    // 初始化表格数据
    this.dataSource = new MatTableDataSource([
      { name: 'John Doe', email: 'john@example.com', phone: '1234567890' },
      { name: 'Jane Smith', email: 'jane@example.com', phone: '0987654321' }
    ]);

    // 初始化表单控件
    this.form = new FormGroup({
      name: new FormControl(),
      email: new FormControl(),
      phone: new FormControl()
    });
  }

  ngOnInit(): void {
  }
}

然后，在模板文件中显示表格和表单，并处理编辑表格的逻辑：

    
    
    

  
  
Name
    
{{ item.name }}
  
  
Email
    
{{ item.email }}
  
  
Phone
    
{{ item.phone }}
  

  

  





  
    Name
    
  

  
    Email
    
  

  
    Phone
    
  

  Save

最后，实现表格的编辑逻辑。在组件类中添加一个方法来处理表单的提交，并将表单的数据更新到表格中：

onSubmit() {
  // 获取表单的值
  const formData = this.form.value;

  // 获取当前选中的行
  const selectedRow = this.dataSource.data.find((item, index) => index === this.dataSource.paginator.pageIndex * this.dataSource.paginator.pageSize + this.dataSource.paginator.pageIndex);

  // 更新表格数据
  if (selectedRow) {
    selectedRow.name = formData.name;
    selectedRow.email = formData.email;
    selectedRow.phone = formData.phone;
  }

  // 重置表单
  this.form.reset();
}

这样，你就可以实现一个可编辑的表格了。当你在表单中输入数据并点击保存按钮时，表格中对应行的数据将会更新。