Angular 7 Material动态表格复选框列不显示问题求助

嘿，我找到你问题的核心啦！你的复选框列之所以完全不渲染，是因为你没有把select这个列ID加入到表格行定义的列数组中。

看你的HTML代码，表头行和数据行都是用viewData.ColumnIds来指定要渲染的列，但这个数组里并没有包含你定义的select列对应的ID，Angular Material自然不知道要把这个列画出来。

下面是具体的修复步骤：

1. 修改TypeScript代码，注入select列ID #

在你获取到viewData数据之后，需要把select添加到ColumnIds数组的最前面（这样复选框会显示在表格最左侧）。你之前注释的那行代码思路是对的，但写法有误，正确的修改如下：

在initData方法的订阅回调里，更新这部分代码：

this.dataSource.view.subscribe(x => {
  if (x.ActionName) {
    this.viewName = x.ActionName;
    this.viewData = x;
    // 关键操作：将select列ID添加到列数组开头
    this.viewData.ColumnIds = ['select'].concat(this.viewData.ColumnIds);
    this.fetchedData = this.viewData.TableData;
    console.log(`View Data ` + JSON.stringify(this.viewData.ViewData.DbrAction));
  }
});

2. 确认HTML代码的正确性 #

你的复选框列的ng-container定义是完全没问题的，不需要改动。只要确保matColumnDef="select"和你加入ColumnIds的字符串完全一致（注意大小写敏感）即可。

额外注意事项 #

• 因为你使用了路由导航重新加载数据，每次initData执行时都要重新注入select列ID，避免切换视图后复选框列消失。
• 检查SelectionModel<TableRow>的泛型TableRow是否和你的数据行类型匹配，类型不匹配可能会导致选中状态异常，但当前的显示问题主要是列ID未包含的问题。

做完这个修改后，你的复选框列应该就能正常显示了，表头的全选按钮和每行的单选按钮都会按照预期渲染~

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