Операторы RxJs и Angular: использование async pipe и tap не заполняет данные

Вот мой фрагмент кода:

В машинописном тексте:

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>

Я пытаюсь показать аг-сетку только тогда, когда данные из наблюдаемой последовательности готовы. Сначала я извлекаю данные, которые глубоко вложены, а затем использую оператор tap для отмены логической привязки к *ngIf.

Я предполагаю, что это можно исправить с помощью метода подписки, но я хочу избежать этого, потому что я использую асинхронный канал напрямую в шаблоне.


typescript javascript angular rxjs rxjs-observables
person rach8garg    schedule 14.05.2020    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете скорее дождаться самого наблюдаемого, async pipe вернет null, пока Observable не разрешится

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

arrow_upward
1
arrow_downward

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>
person Kurt Hamilton    schedule 14.05.2020