Угловая полоса ожидания для всех асинхронных операций в ngOnInit

Question

Я хотел бы добавить строку ожидания this , чтобы заставить пользователя ждать, пока все необходимые данные не будут получены.
Проблема в том, что у меня несколько HTTP-вызовов, поэтому я не знаю, существует ли простой способ перехватить конец всех этих запросов (я подумал о счетчике, который я увеличиваю для каждого конца вызова только тогда, когда все методы заканчивают I надо скрывать панель ожидания).
Так как это общая проблема, есть простой способ сделать это?
Например, это код компонента:

ngOnInit() {
   this.spinner.show();
   call1();
   call2();
   call3();
   .....
   callN();

   //At the end of all method
   this.spinner.hide();
}

call1() {
    this.service.getAtti().subscribe((apiResult: ApiResult<a[]>) => {   
      this.a = apiResult.Data;
    }
    );
  }

  call2() {
    this.service.getDestinatari().subscribe((apiResult: ApiResult<b[]>) => {
      this.b =  apiResult.Data;
    }
    );
  }

  call3() {
    this.service.getRichiedenti().subscribe((apiResult: ApiResult<c[]>) => {
      this.c =  apiResult.Data;
    }
    );
  }

  callN() {
    this.service.getMessi().subscribe((apiResult: ApiResult<d[]>) => {
      this.d = apiResult.Data;
    }
    );
  }

Answer 1

forkjoin не работает с аргументами метода, вы можете помочь?

Извините, я не понимаю вопроса.

Может быть, следующий ответит:

ngOnInit() {
   this.spinner.show();
   let calls = [];
   calls.push(call1());
   calls.push(call2());
   calls.push(call3());
   .....
   calls.push(callN());

   Observable.forkJoin(calls).subscribe(results => { 
     this.spinner.hide();
   });
}

call1() {
    return this.service.getAtti().pipe(tap((apiResult: ApiResult<a[]>) => {   
      this.a = apiResult.Data;
    }
    ));
  }

  call2() {
    return this.service.getDestinatari().pipe(tap((apiResult: ApiResult<b[]>) => {
      this.b =  apiResult.Data;
    }
    ));
  }

  call3() {
    return this.service.getRichiedenti().pipe(tap((apiResult: ApiResult<c[]>) => {
      this.c =  apiResult.Data;
    }
    ));
  }

  callN() {
    return this.service.getMessi().pipe(tap((apiResult: ApiResult<d[]>) => {
      this.d = apiResult.Data;
    }
));

}