如果我需要使用实时功能以及模板上的“异步”管道，请在此处关闭“加载程序”

Question

如果我需要使用实时功能以及模板上的 async 管道，你能告诉我如何在此处关闭 loader 吗？

由于它具有实时功能，因此它不适用于 finalize 运算符，即永远不会完成。所以请提供任何线索。

component.ts

 private getAlerts(loader: HTMLIonLoadingElement): void {
    this.alertsChanged$ = this.alertsService.getAlerts().pipe(
      finalize(() => {
        this.loadingService.dismissLoader(loader); // here is the problem
      }),
      map((res) => res)     
    );
  }

service.ts

 getAlerts(): Observable<AlertModel[]> {
    return this.angularFireDatabase
      .list<AlertModel>(`groups/${this.groupId}/alerts`)
      .valueChanges();
  }

.html

 <app-alerts
      [alerts]="alertsChanged$ | async"
  ></app-alerts>

Answer 1

如果 finalize 不起作用，则使用 tap。见下文。

private getAlerts(loader: HTMLIonLoadingElement): void {
    this.alertsChanged$ = this.alertsService.getAlerts().pipe(
        tap(() => {
            this.loadingService.dismissLoader(loader);
        }),
        map((res) => res)     
    );
}

详情请看这里：https://rxjs.dev/api/operators/tap