Angular Material mat-table调用renderRows时报Cannot read properties of undefined错误

排查思路 #

• 首先确认MatTableModule是否正确导入：如果你的项目模块没有导入@angular/material/table的MatTableModule，模板中的mat-table指令不会生效，@ViewChild会拿到普通的HTML <table> DOM元素而非MatTable实例，自然不存在renderRows方法，调用就会报错。
• 校验@ViewChild获取的实例类型：在addDataClick方法中调用renderRows前加一行console.log(this.companyTable)，查看控制台输出的是否为MatTable类型实例，如果输出的是普通DOM对象，即可确认是指令未生效的问题。
• 调整@ViewChild的static配置：将当前的{ static: true }改为{ static: false }，static: true仅适用于元素初始渲染时就存在、没有被*ngIf等结构指令控制的场景，如果你的表格所在区域有动态显隐逻辑，static: true会导致获取到错误的引用。
• 检查拼写一致性：确认模板中声明的#CompanyTable模板变量名，和@ViewChild中填写的字符串完全一致，大小写也必须匹配。
• 可选替代方案：将普通数组类型的myDataSource替换为MatTableDataSource实例，修改数据时直接更新数据源的data属性即可自动触发表格刷新，无需手动调用renderRows，示例代码如下：

// 初始化时声明
myDataSource = new MatTableDataSource<ICompany>([]);

// 添加数据时
addDataClick() {
  const aCompany: ICompany = { companyName: "Albertsons", companyAlias: "Acme" };
  this.myDataSource.data = [...this.myDataSource.data, aCompany];
}

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