javascript - 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
}