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

问题描述 投票:1回答:1

.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参数。但这是一个明显不好的选择,因为我们无法保证数据的可接收时间。

angular typescript rxjs angular7 ionic4
1个回答
0
投票
this.products$ = this.bikeShopService.get().pipe(

     tap( product=>   { 
               // do something here to notify that data is successfully retrieved
         }        
    )
)
© www.soinside.com 2019 - 2024. All rights reserved.