.TS
init() {
const loading = await this.loadingService.presentLoader();//loading
this.products$ = this.bikeShopService.get();//Observable operation
}
html的
<ion-col size="6" *ngFor="let p of (products$ | async)?.result[0]?.categories[0]?.ShoppingCart;">
<app-bike-shop-item [data]="p"></app-bike-shop-item>
</ion-col>
loading.service.ts
@Injectable({
providedIn: 'root'
})
export class LoadingService {
constructor(private loadingCtrl: LoadingController) { }
async presentLoader(message = 'Please wait...'): Promise<HTMLIonLoadingElement> {
const loader = await this.loadingCtrl.create({
message: message,
});
loader.present();
return loader;
}
dismissLoader(loader: HTMLIonLoadingElement): Promise<boolean> {
if (loader) { return loader.dismiss(); }
}
}
问:你能否告诉我如何根据loading icon
的完成停止subscription
?由于我使用模板async
管道我没有.ts
文件完成事件(即subscription
)。我可以使用duration参数。但这是一个明显不好的选择,因为我们无法保证数据的可接收时间。
this.products$ = this.bikeShopService.get().pipe(
tap( product=> {
// do something here to notify that data is successfully retrieved
}
)
)