Question

.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参数。但这显然是一个糟糕的选择，因为我们不能保证数据的接收时间。

Answer 1

this.products$ = this.bikeShopService.get().pipe(

     tap( product=>   { 
               // do something here to notify that data is successfully retrieved
         }        
    )
)

根据模板异步管道的完成情况停止加载图标

1 个答案: