使用Angular Data Table报错dataStream.pipe is not a function求解决方案

嘿，我一眼就定位到问题所在了——你遇到的这个错误，核心原因是服务里的getReceipt()方法没有返回Observable对象，而是直接返回了数组this.sdrParsed.receipts。Angular Material的DataSource要求connect()方法必须返回Observable，当内部尝试对这个返回值调用pipe方法时，数组没有这个方法，自然就抛出错误了。

下面给你两个可行的解决方案：

方案1：修正服务中的getReceipt方法 #

你只需要用RxJS的of操作符把数组包装成Observable，就能让connect()方法返回符合要求的类型。

步骤1：导入必要的RxJS工具 #

在你的服务文件顶部添加导入：

import { Observable, of } from 'rxjs';

步骤2：修改getReceipt方法 #

getReceipt(): Observable<IReceipt[]> {
  console.log('sdrParsed: ', this.sdrParsed.receipts);
  // 用of把数组转换成Observable返回
  return of(this.sdrParsed.receipts);
}

修改后，你的自定义ReceiptDataSource的connect()方法就能正确返回Observable，DataTable内部的pipe调用就不会出错了。

方案2：用MatTableDataSource简化实现 #

如果你的数据源不需要复杂的自定义逻辑，直接使用Angular Material官方提供的MatTableDataSource会更简洁，也能避免这类基础错误。

步骤1：导入MatTableDataSource #

在组件文件中添加导入：

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

步骤2：替换组件中的数据源定义 #

// 替换原来的自定义DataSource实例
dataSource = new MatTableDataSource<IReceipt>();
displayedColumnsReceipt = ['idr', 'fromDate'];

ngOnInit(): void {
  // 订阅服务获取数据，赋值给dataSource的data属性
  this.registerService.getReceipt().subscribe(receipts => {
    this.dataSource.data = receipts;
  });
}

步骤3：保持HTML代码不变 #

你现有的表格HTML代码不需要任何修改，MatTableDataSource可以直接和<mat-table>的[dataSource]绑定。

完成以上任一方案的修改后，重新运行项目，表格就能正常渲染数据，那个烦人的错误也会消失啦。

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