如果我需要在模板上使用实时功能和' async '管道，请关闭' loader '

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