Angular新手求助：自定义Angular Material表格能否实现？

这个需求完全不难，没必要放弃，Angular Material Table本身就原生支持行数据的获取与使用，下面给你具体实现步骤：

1. 自定义列展示行内多个字段 #

在你的自定义列模板中，通过*matCellDef="let row"语法可以直接拿到当前行的完整数据对象，之后就能自由访问对象的属性：

<!-- list-people.component.html -->
<my-table [dataSource]="peopleData">
  <!-- 自定义列：展示name + last -->
  <my-column columnDef="fullName">
    <ng-header-cell *matHeaderCellDef> 全名 </ng-header-cell>
    <ng-cell *matCellDef="let person">
      {{ person.name }} {{ person.last }}
    </ng-cell>
  </my-column>

  <!-- 其他默认列 -->
  <my-column columnDef="email" header="邮箱"></my-column>
</my-table>

这里的person就是当前行的完整数据对象，直接调用其属性即可拼接展示内容。

2. 编辑按钮点击时传递行数据 #

在操作列中添加按钮，点击事件直接把当前行数据作为参数传入组件方法：

<!-- list-people.component.html 操作列部分 -->
<my-column columnDef="actions">
  <ng-header-cell *matHeaderCellDef> 操作 </ng-header-cell>
  <ng-cell *matCellDef="let person">
    <button mat-raised-button color="primary" (click)="handleEdit(person)">
      编辑
    </button>
  </ng-cell>
</my-column>

然后在组件类中定义对应的处理方法，就能拿到完整的行数据：

// list-people.component.ts
handleEdit(person: Person) {
  // 这里可以拿到当前行的所有数据，比如打印或传入编辑弹窗
  console.log("待编辑用户数据：", person);
  // 后续逻辑：打开编辑模态框、跳转编辑页面等
}

3. 若自定义封装了表格组件的注意事项 #

如果你是自己封装了my-table和my-column组件，需要确保封装时把行数据传递到父组件的模板上下文里：
比如在my-column的内部模板中，要正确传递行变量：

<!-- my-column.component.html -->
<mat-header-cell *matHeaderCellDef>
  <ng-content select="[ng-header-cell]"></ng-content>
</mat-header-cell>
<mat-cell *matCellDef="let row">
  <ng-content select="[ng-cell]" [ngTemplateOutletContext]="{ $implicit: row }"></ng-content>
</mat-cell>

这样父组件中*matCellDef="let person"才能正确获取到行数据。

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