1

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

存储库.service.ts：

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

联系人.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;
  }

联系人.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'

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

任何人都可以帮助解决这个问题吗？

4

2 回答 2

3

正如错误所说，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 请求分配给控制器中的变量。然后，您可以使用mapoperator 来设置data，paginator并使用sortproperties 和finalizeoperator 来隐藏微调器。

尝试以下

控制器

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>

编辑：更改res为dataSource内部map运算符

于 2021-01-18T11:20:21.057 回答
1

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

 [dataSource]="dataSource"

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

于 2021-01-18T11:12:39.810 回答