JS / Angular - как разделить загрузочные счетчики для нескольких ящиков на веб-странице

Question

У меня есть веб-страница, которая является своего рода приборной панелью с разными полями.В каждом окне я получаю данные из базы данных - когда данные загружаются, я хочу показать счетчик.Для загрузки данных у меня есть один метод:

loadElements() {
    this.name = this.overviewService.getName();
    this.systemsResult = this.systemService.getSystemsNumber(this.databaseId, this.formatDate(this.dateFrom), this.formatDate(this.dateTo));
    this.countCallsResult = this.statisticService.getCallsNumber(this.databaseId, this.formatDate(this.dateFrom), this.formatDate(this.dateTo));
    this.countConnectionResult = this.connectionService.getConnectionsNumber(this.databaseId, this.formatDate(this.dateFrom), this.formatDate(this.dateTo));
    this.dataVolumeResult = this.statisticService.getDataVolume(this.databaseId, this.formatDate(this.dateFrom), this.formatDate(this.dateTo));
    this.systemsInfo = this.overviewService.getSystemsInfo();

И я вызываю это в NgOnInit.Я хочу разделить счетчики, потому что некоторые результаты я могу получить быстрее, чем другие.Я знаю, как показывать расходомеры одновременно, но не знаю, как их разделить.Кто-нибудь может мне помочь?

Answer 1

Вы можете показать / скрыть разные счетчики для соответствующих им данных, используя директиву *ngIf для разных данных.Рассмотрите следующий сценарий и внесите соответствующие изменения в свой файл.

.component.html

<div *ngIf="!name; else showName">
 <app-spinner></app-spinner>
</div>
<ng-template #showName>{{name}}</ng-template>

<div *ngIf="!systemsInfo; else showSystemsInfo">
 <app-spinner></app-spinner>
</div>
<ng-template #showSystemsInfo >{{systemInfo}}</ng-template>

.component.ts

name : any;
systemsInfo : any;

ngOnInit(){
 this.loadData()
}

loadData(){
  this.name = this.overviewService.getName();
  this.systemsInfo = this.overviewService.getSystemsInfo();
  // rest of data
}