將 3 個 async 合並為一個 observable

Question

我有 3 個可觀察值用於過濾 html 部分

這是 typescript 零件

   fiscalYear$ = this.store$.select(this.tableStoreService.getFiscalYear);
      isLoading$ = this.store$.select(this.tableStoreService.tableSelectors.getLoading);
isReportLoading$ = this.store$.select(isReportLoading);

所有這些值的返回類型都有Observable<boolean> 。

然后我像這樣使用它來過濾[disabled]中的html

<button class="btn btn-primary font-weight-700 font-size-200" [disabled]="(isReportLoading$ | async) || (fiscalYear$ | async) < 2022 || (isLoading$ | async) " (click)="clickExport()">
          {{ 'homepage.export' | translate }}
          <mat-icon class="btn-icon export-icon" svgIcon="export"></mat-icon>
        </button>

我試着這樣做

get isExportAvialable$() {
    return combineLatest(this.fiscalYear$, this.isLoading$, this.isReportLoading$, (fiscalYear, isLoading, isReportLoading) => isReportLoading || fiscalYear < 2022 || isLoading);
  }

但fiscalYear < 2022顯示錯誤

我如何將它結合起來只使用一個異步？

Answer 1

你可以像這樣解決它：

fiscalYear$ = this.store$.select(this.tableStoreService.getFiscalYear);
isLoading$ = this.store$.select(this.tableStoreService.tableSelectors.getLoading);
isReportLoading$ = this.store$.select(isReportLoading);
isExportAvailable$ = combineLatest([
    this.fiscalYear$, 
    this.isLoading$, 
    this.isReportLoading$
]).pipe(map(([year, isLoading, isReportLoading]) => return year < 2022 && isLoading && isReportLoading));

然后只需在模板中使用 isExportAvailable$ 和異步 pipe 即可。