Angular Material MatTable自定义操作列不生效问题求助

根因 #

你在API请求成功的回调中直接覆盖了displayedColumns数组，初始化时加入的actions列被接口返回的字段完全替换，Angular Material表格仅会渲染displayedColumns中声明的列，因此操作列不会被渲染。
另外你已经单独定义了actions列的模板，如果后续把actions加回displayedColumns，动态遍历生成列的逻辑会重复生成actions列定义，触发报错。

修复步骤 #

1. 修改接口回调的数组赋值逻辑 #

将getTable方法中给displayedColumns赋值的代码替换为以下内容，保留actions列：

// 操作列放在最左侧，如需放在最右侧改为 [...Object.keys(res.IstValues[0]), 'actions']
this.displayedColumns =  ['actions', ...Object.keys(res.IstValues[0])];

2. 调整动态列生成逻辑，排除actions列 #

修改HTML中动态遍历列的代码，避免重复生成actions列：

<ng-container *ngFor="let column of displayedColumns.filter(col => col !== 'actions')" [matColumnDef]="column">

修改完成后操作列即可正常显示，编辑、删除按钮的点击事件可以后续在对应按钮上添加(click)绑定对应处理方法即可。

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