Angular 5中为DataTable配置DataSource报错，求解决方法

我一眼就看出问题所在啦——你的API返回的是单个文档对象，但MatTableDataSource需要的是数组类型的数据（或者Observable、合法的DataSource实例），直接把单个对象赋值给它自然会报错。

先确认你的服务器返回结构：

{receivedDate: "2018-05-22T00:00:00", id: "27280371", companyName: "Dark&Stormy", documentType: 11, receipts: Array(1), …}

这是一个单独的对象，不是数组，而Angular Material表格组件需要数组来渲染每一行数据，这就是报错的核心原因。

具体修复步骤 #

你只需要把这个单个对象包装成数组，再传给MatTableDataSource即可，修改ngOnInit里的订阅代码：

ngOnInit() {
  this.activatedRoute.params.subscribe(params => {
    if (params['id']) {
      this.id = params['id'];
      console.log('paramsId: ', this.id);
      this.inputService.getDocumentId(this.id)
        .subscribe(res => {
          // 方案1：把单个对象包装成数组，赋值给已初始化的dataSource的data属性
          this.dataSource.data = [res];
          // 方案2：也可以重新初始化MatTableDataSource
          // this.dataSource = new MatTableDataSource([res]);
          console.log('sub-details.res: ', res);
        });
    }
  });
}

额外注意事项 #

• 检查你的displayedColumnsReceipt字段是否和返回对象的属性匹配：比如你列配置里写的fromDate，但返回的字段是receivedDate，这会导致表格无法正确渲染对应列的数据，需要调整列名或者做字段映射。
• 如果未来你的API可能返回多个文档对象，建议直接让后端返回数组格式，这样前端就不需要额外做包装处理了。

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