RxJs 运算符和 Angular：使用异步管道和 tap 不会填充数据

Question

这是我的代码片段：

在打字稿中：

isDataSearch = false;

getDatacollectionByID() {
  const params = {
    id: <some random ID>,
  };
  this.metaData = this.dataService.getDatacollectionByID(params)
    .pipe(
      pluck('level1', 'level2', 'level3'),
      tap(() => this.isDataSearch = true),
      map(metaData => [metaData]), // to be used as an array for ag grid
    )
}

在 HTML 模板中：

<ag-grid-angular
    *ngIf="isDataSearch"
    [gridOptions]="dataCollectionConfig"
    [rowData]="metaData | async"
    [modules]="modules"
    class="ag-theme-balham data-collection-grid"
>
</ag-grid-angular>

我想要完成的是仅当来自可观察序列的数据完成时才显示 ag-grid。我首先提取深度嵌套的数据，然后使用 tap 运算符将布尔绑定反转为 *ngIf.

我想这可以使用订阅方法修复，但我想避免它，因为我直接在模板中使用异步管道。

Answer 1

您可以等待 Observable 本身，async pipe 将 return null 直到 Observable 已解决

<ag-grid-angular
    *ngIf="metaData | async as resolvedMetaData"
    [gridOptions]="dataCollectionConfig"
    [rowData]="resolvedMetaData"
    [modules]="modules"
    class="ag-theme-balham data-collection-grid"
>

Answer 2

metaData 将永远不会在此示例中调用，因为 isDataSearch 开始时为 false。

相反，您可以将 <ag-grid-angular> 包装在调用可观察对象的 *ngIf 中，并将结果通过管道传输到新变量中。

<ng-container *ngIf="metaData | async as result">
  <ag-grid-angular    
    [gridOptions]="dataCollectionConfig"
    [rowData]="result"
    [modules]="modules"
    class="ag-theme-balham data-collection-grid"
  >
  </ag-grid-angular>
</ng-container>

RxJs 运算符和 Angular：使用异步管道和 tap 不会填充数据

RxJs operators and Angular: using async pipe and tap does not populate data

javascript

rxjs

typescript

angular

rxjs-observables