Angular Data table, dataStream.pipe is not a function - json

Question

I'm trying to create a table using angular data table, but I'm getting this error which I think comes from the dataSource, but I can't see how to solve it. Any suggestions is appreciated it.
This the error I get:
dataStream.pipe is not a function
Here is the html for the table:
<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>
This is the dataSource class:
export class ReceiptDataSource extends DataSource<any> {
constructor(private registerService: RegisterService) {
super();
}
connect(): Observable<IReceipt[]> {
return this.registerService.getReceipt();
}
disconnect() {}
}
This is the part of my component where the dataSource and table structure is defined:
dataSource = new ReceiptDataSource(this.registerService);
displayedColumnsReceipt = ['idr', 'fromDate'];
And this is the service where the getReceipt method is declared:
getReceipt(): Observable<IReceipt[]> {
console.log('sdrParsed: ', this.sdrParsed.receipts);
return this.sdrParsed.receipts;
}

Answer 1

It is difficult to know for sure from the code sample provided, but given the error is saying .pipe is not a function, it almost certainly means the return from your connect method is NOT an Observable. You could try some code to see if you can subscribe to the return of your service function to confirm that subscribe also fails. If it turns out to be not an Observable you can make sure to return a valid Observable object.