Таблица угловых данных, dataStream.pipe не является функцией

Question

Я пытаюсь создать таблицу, используя таблицу угловых данных, но я получаю эту ошибку, которая, я думаю, исходит из источника данных, но я не вижу, как ее решить.Любые предложения приветствуются.

Это ошибка, которую я получаю:

dataStream.pipe не является функцией

Вот HTML-код для таблицы:

    <div class="example-container mat-elevation-z8">
      <mat-table #table [dataSource]="dataSource">
        <!--*- Note that these columns can be defined in any order.
        The actual rendered columns are set as a property on the row definition" -->
        <!--* Idr Column -->
        <ng-container matColumnDef="idr">
          <mat-header-cell *matHeaderCellDef> Idr </mat-header-cell>
          <mat-cell *matCellDef="let receipts"> {{receipts.idr}} </mat-cell>
        </ng-container>
        <!--* Period Start Column -->
        <ng-container matColumnDef="fromDate">
          <mat-header-cell *matHeaderCellDef> Periode start </mat-header-cell>
          <mat-cell *matCellDef="let receipts"> {{receipts.fromDate}} </mat-cell>
        </ng-container>
<mat-header-row *matHeaderRowDef="displayedColumnsReceipt"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumnsReceipt;"></mat-row>
      </mat-table>
    </div>

Это класс источника данных:

export class ReceiptDataSource extends DataSource<any> {  

constructor(private registerService: RegisterService) {
    super();
  }

  connect(): Observable<IReceipt[]> {
    return this.registerService.getReceipt();
  }

  disconnect() {}

}

Это часть моего компонента, в которой определены структура данных и таблицы:

dataSource = new ReceiptDataSource(this.registerService);
displayedColumnsReceipt = ['idr', 'fromDate'];

И это сервис, в котором объявлен метод getReceipt:

getReceipt(): Observable<IReceipt[]> {
console.log('sdrParsed: ', this.sdrParsed.receipts);
return this.sdrParsed.receipts;
}