错误： 无效管道参数： 管道'AsyncPipe' MatTable 角度 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'

这是屏幕截图。正如您在右下角看到的，数据被提取，但没有被处理到表中。

有人能帮我解决这个问题吗？

Answer 1

正如错误所说，async管道只能与可观察到的一起使用。相反，你正在尝试从可观察的事物中得到回应。

选项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"

正如官方文档中提到的，您可以使用带有observable或promise的异步管道。但在您的情况下，您的数据源本身并不是一个可观察的或承诺。您的getList方法是可观察的。因此，您不能在尝试时对数据源使用异步管道。