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
}

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

1 个答案: