Angular使用mat-table时报错无法绑定dataSource为table已知属性求助

问题修复方案 #

1. 修正Angular Material模块导入路径 #

从Angular Material v9开始，组件均改为单独子路径导入，你当前的全局导入方式import { MatTableModule, MatSortModule } from '@angular/material';已经不被新版本支持，会导致表格相关指令无法被识别，进而报dataSource属性不合法的错误，将导入修改为：

import { MatTableModule } from '@angular/material/table';
import { MatSortModule } from '@angular/material/sort';

2. 异步API数据适配 #

你当前静态数据的赋值方式是正确的，如果后续改为从接口拉取异步数据，推荐使用官方的MatTableDataSource封装，方便后续扩展排序、分页、过滤能力，修改TS代码如下：
首先导入依赖：

import { MatTableDataSource } from '@angular/material/table';

调整变量声明和赋值逻辑：

export class AppComponent {
  displayedColumns: string[] = ['position'];
  // 初始化空数据源，避免渲染时报错
  dataSource = new MatTableDataSource<PeriodicElement>([]);

  // 模拟接口请求赋值
  ngOnInit() {
    this.yourApiService.fetchData().subscribe((res: PeriodicElement[]) => {
      this.dataSource.data = res;
    })
  }
}

3. 常见疑问解答 #

• 不需要手动写*ngFor遍历数据，*matRowDef指令已经内置了数据遍历逻辑，只要正确绑定dataSource即可。
• 之前尝试的删除table标签的方案是旧版<mat-table>元素的用法，两种写法都是官方支持的，不会因为这个导致报错。

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