Angular中无法为MatTableDataSource赋值的类型匹配问题

你遇到的问题很典型——直接把接口类型的数据赋值给了MatTableDataSource类型的变量，这两个类型完全不兼容：putDetail是你定义的数据实体/接口，而MatTableDataSource是Angular Material提供的专门用于表格的数据源包装类，它内部包含_data等专属属性，所以直接赋值会触发类型错误。

正确的解决步骤： #

• 先正确声明dataSource的类型：给MatTableDataSource加上泛型，指定它要承载的数据类型是putDetail，让类型检查更严谨。
• 在异步回调内实例化MatTableDataSource：因为getcomplains()是异步请求，必须在数据返回后（也就是subscribe的回调函数里），用拿到的数据来创建MatTableDataSource的实例，再赋值给dataSource。

修正后的代码示例： #

constructor(private appService: AppService) { }

newHero: putDetail;
// 声明时指定泛型
dataSource: MatTableDataSource<putDetail>;

ngOnInit() {
  this.appService.getcomplains()
    .subscribe(data => {
      this.newHero = data;
      // 用获取到的数据实例化MatTableDataSource
      this.dataSource = new MatTableDataSource(this.newHero);
    });
}

如果你的getcomplains()返回的是数组类型（通常表格数据源是数组），那newHero的类型应该改成putDetail[]，对应的代码调整为：

newHero: putDetail[];
dataSource: MatTableDataSource<putDetail>;

ngOnInit() {
  this.appService.getcomplains()
    .subscribe(data => {
      this.newHero = data;
      this.dataSource = new MatTableDataSource(this.newHero);
    });
}

这样就能完美解决类型不匹配的问题，同时保证数据在异步请求完成后才被正确加载到表格数据源中。

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