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
}