Angular 12 Material Table [dataSource]报错：数据源不匹配数组/可观察对象/DataSource

错误根因 #

你调用的getCart接口返回的是单个购物车对象，但组件中声明的carts是数组类型Cart[]，你直接把单个对象赋值给数组变量后传给mat-table的[dataSource]，不符合Angular Material Table要求的「数据源必须是数组、Observable或DataSource实例」的规则，所以触发类型不匹配报错。

修复方案 #

方案1（适配当前单条购物车展示场景） #

将接口返回的单个购物车对象包装为长度为1的数组即可，修改组件ngOnInit的赋值逻辑：

ngOnInit(): void {
  this.route.params.subscribe(params => {
    this.cartsService.getCart(params.id)
      .subscribe(cartRes => {
        // 把单条对象包装成数组
        this.carts = [cartRes];
      })
  });
}

方案2（适配多购物车展示场景） #

如果后续需要展示同一用户的多条购物车记录，直接将服务调用替换为返回购物车数组的后端接口即可。

可选优化 #

建议给carts变量初始化空数组，避免接口返回前变量未定义引发额外报错：

// 把原来的非空断言声明改成初始化为空数组
carts: Cart[] = [];

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