将 3 个 async 合并为一个 observable
Combine 3 async to one observable
我有 3 个 observables 用于过滤器 html 部分
这是打字稿部分
fiscalYear$ = this.store$.select(this.tableStoreService.getFiscalYear);
isLoading$ = this.store$.select(this.tableStoreService.tableSelectors.getLoading);
isReportLoading$ = this.store$.select(isReportLoading);
所有这些值都具有 return 类型的 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
显示错误
我如何将它组合起来只使用一个异步?
你可以这样解决:
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$ 与异步管道一起使用。
我有 3 个 observables 用于过滤器 html 部分
这是打字稿部分
fiscalYear$ = this.store$.select(this.tableStoreService.getFiscalYear);
isLoading$ = this.store$.select(this.tableStoreService.tableSelectors.getLoading);
isReportLoading$ = this.store$.select(isReportLoading);
所有这些值都具有 return 类型的 Observable<boolean>
。
然后我就这样用它在[disabled]
<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
显示错误
我如何将它组合起来只使用一个异步?
你可以这样解决:
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$ 与异步管道一起使用。