Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe' MatTable Angular 11

Question

I am trying to use Angular MatTable with an async pipe. I get the data from RESTAPI as Observable. However, when I use ([dataSource] = "dataSource | async") in this way, I get the error I mentioned above.

repository.service.ts:

public GetList(controller: string): Observable<T[]> {
return this.httpclient.get<T[]>(this.apiURL + '/' + controller + '/getList', { headers: this.headers });}

contact.component.ts:

ngOnInit() {
this.contactService.GetList("OfferContact").subscribe(res => {
  this.ContactList = res
  this.setFunctions(this.ContactList)
})} 
setFunctions(list) {
  this.dataSource.data = list;
  this.spinner.hide()
  this.dataSource.paginator = this.paginator;
  this.dataSource.sort = this.sort;
  }

contact.component.html:

           <table mat-table [dataSource]="dataSource|async" matSort>

                <ng-container matColumnDef="company">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Firma Adı </th>
                    <td mat-cell *matCellDef="let element"> {{element.company}} </td>
                </ng-container>

                <ng-container matColumnDef="name">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Yetkili Adı </th>
                    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
                </ng-container> 
                   ...
                 </table>
            <mat-paginator [pageSizeOptions]="[20, 30, 50, 70, 100]"></mat-paginator>

the error

ERROR Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'

this is the screenshot. As you can see at the bottom right, the data is fetched but not processed into the table.

Can anyone help with this issue?

Answer 1

As the error says, async pipe could only be used in conjunction with an observable. You're trying with the response from the observable instead.

Option 1: without async pipe

You could simply simply remove the async pipe. This might throw an error in the console at component initialization when the dataSource variable is undefined.

<table mat-table [dataSource]="dataSource" matSort>
    <ng-container matColumnDef="company">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Firma Adı </th>
        <td mat-cell *matCellDef="let element"> {{element.company}} </td>
    </ng-container>

    <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Yetkili Adı </th>
        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
    </ng-container> 
        ...
</table>
<mat-paginator [pageSizeOptions]="[20, 30, 50, 70, 100]"></mat-paginator>

Option 2: with async pipe

You could assign the HTTP request to a variable in the controller. You could then use map operator to set data, paginator and sort properties and finalize operator to hide the spinner.

Try the following

Controller

dataSource$: Observable<any>;  // <-- define it as an observable ('$' at end is convention)
ngOnInit() {
  this.dataSource$ = this.contactService.GetList("OfferContact").pipe(
    tap(res => {
      this.ContactList = res   // <-- is `this.ContactList` even required?
    }),
    map(dataSource => ({
      ...dataSource, 
      dataSource['data']: res,
      dataSource['paginator']: this.paginator,
      dataSource['sort']: this.sort
    })),
    finalize(() => this.spinner.hide())
  );
}

Template

<ng-container *ngIf="(dataSource$ | async) as dataSource">   <!-- wrap it in *ngIf to reuse the response -->
    <table mat-table [dataSource]="dataSource" matSort>
        <ng-container matColumnDef="company">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Firma Adı </th>
            <td mat-cell *matCellDef="let element"> {{element.company}} </td>
        </ng-container>

        <ng-container matColumnDef="name">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Yetkili Adı </th>
            <td mat-cell *matCellDef="let element"> {{element.name}} </td>
        </ng-container> 
            ...
    </table>
    <mat-paginator [pageSizeOptions]="[20, 30, 50, 70, 100]"></mat-paginator>
</ng-container>

Edit: Change res to dataSource inside map operator

Answer 2

You can try to delete the pipe "async" like this:

 [dataSource]="dataSource"

As mentioned in the official documentation, you can use an async pipe with observable or promise. But in your case, your data source is not an observable or a promise itself. Your getList method is observable. So, you can't use an async pipe with your data source as you tried.