Angular 7 - 如何在 *ngFor 加载数据之前显示加载器？答案

【问题标题】：Angular 7 - How to show loader until *ngFor loads the data?Angular 7 - 如何在 *ngFor 加载数据之前显示加载器？
【发布时间】：2019-01-13 18:00:45
【问题描述】：

在 *ngFor 加载数据之前如何显示加载器？

<mat-list role="list" *ngFor="let item of channel.channel; let i=index">
    <mat-list-item role="listitem">{{i + 1}}. {{item}}</mat-list-item>
</mat-list>

加载需要很长时间，如何在数据加载完成之前显示加载器？

【问题讨论】：

你能展示一下你是如何加载数据的吗？

标签： angular angular7

【解决方案1】：

您可以将*ngIf="channel.channel" 添加到mat-list 并在下面使用mat-spinner 和*ngIf="!channel.channel"

例如：

<mat-list role="list" *ngIf="channel.channel" *ngFor="let item of channel.channel; let i=index">
     <mat-list-item role="listitem">{{i + 1}}. {{item}}</mat-list-item>
</mat-list>

<mat-spinner *ngIf="!channel.channel"></mat-spinner>

【讨论】：

【解决方案2】：

您应该在组件级别定义一个布尔变量，

showLoader : boolean = true;

然后，一旦你得到你的数据，将值设置为 false。

this.showLoader = false;

你可以在你的模板上使用*ngIf来检查数据是否被加载，

<mat-list role="list" *ngIf="!showLoader" *ngFor="let item of channel.channel; let i=index">
     <mat-list-item role="listitem">{{i + 1}}. {{item}}</mat-list-item>
</mat-list>

<mat-spinner *ngIf="showLoader"></mat-spinner>

【讨论】：