javascript - JS/Angular-如何为网页上的多个框分离加载微调器

我的网页是某种带有不同框的仪表板。在每个框中，我都从数据库中获取数据-加载数据时，我想显示微调器。要加载数据，我有一种方法：

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称呼它。我想将微调器分开，因为某些结果比其他结果更快。我知道如何同时向纺纱厂显示这种消极情绪，但我不知道如何将它们分开。有人能帮我吗？

最佳答案

您可以通过对不同数据分别使用*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
}

关于javascript - JS/Angular-如何为网页上的多个框分离加载微调器，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52943827/