如何将编辑图标和数据放在mat表中的一个<td>中

在Mat表中，可以将编辑图标和数据放在一个<td>中，可以通过以下步骤实现：

首先，在HTML中创建一个表格，并使用Mat表格组件进行渲染。例如：

<table mat-table [dataSource]="dataSource">
  <!-- 列定义 -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef>Name</th>
    <td mat-cell *matCellDef="let element">{{ element.name }}</td>
  </ng-container>

  <ng-container matColumnDef="edit">
    <th mat-header-cell *matHeaderCellDef></th>
    <td mat-cell *matCellDef="let element">
      <!-- 编辑图标 -->
      <button mat-icon-button (click)="editItem(element)">
        <mat-icon>edit</mat-icon>
      </button>
    </td>
  </ng-container>

  <!-- 列绑定 -->
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

在上述代码中，我们定义了两个列：name和edit。name列用于显示数据，edit列用于显示编辑图标。
在edit列的<td>中，我们使用了Mat按钮组件和Mat图标组件来创建编辑图标按钮。当点击编辑图标按钮时，可以调用editItem()方法来处理编辑逻辑。
在组件的代码中，需要定义dataSource和displayedColumns变量，并实现editItem()方法。例如：

import { Component } from '@angular/core';

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent {
  dataSource = [
    { name: 'John Doe' },
    { name: 'Jane Smith' },
    { name: 'Bob Johnson' }
  ];

  displayedColumns = ['name', 'edit'];

  editItem(element: any) {
    // 编辑逻辑
    console.log('Edit item:', element);
  }
}