错误：InvalidPipeArgument：管道“AsyncPipe”MatTable Angular 11 的“[object Object]”

Question

我正在尝试将 Angular MatTable 与异步管道一起使用。我从 RESTAPI 获取数据作为 Observable。但是，当我以这种方式使用 ([dataSource] = "dataSource | async") 时，我得到了上面提到的错误。

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>

错误

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

this 是截图。正如您在右下角看到的那样，数据已被提取但未处理到表中。

谁能帮忙解决这个问题？

Answer 1

正如错误所说，async 管道只能与可观察对象一起使用。您正在尝试使用 observable 的响应。

选项 1：不带async 管道

您可以简单地删除async 管道。当dataSource 变量为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>

选项 2：使用async 管道

您可以将 HTTP 请求分配给控制器中的变量。然后您可以使用map 运算符来设置data、paginator 和sort 属性，并使用finalize 运算符来隐藏微调器。

试试下面的

控制器

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())
  );
}

模板

<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>

编辑：在 map 运算符中将 res 更改为 dataSource

Answer 2

您可以尝试像这样删除管道“异步”：

 [dataSource]="dataSource"

正如official documentation 中提到的，您可以使用带有可观察或承诺的异步管道。但是在您的情况下，您的数据源本身不是可观察的或承诺。您的 getList 方法是可观察的。因此，您不能像尝试那样对数据源使用异步管道。