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

Close the `loader` here if I need to use the Real-time feature as well as an `async` pipe on the template

如果我需要使用实时功能以及模板上的 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>

如果 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