Question

如何显示加载程序，直到* 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>

加载需要很长时间，如何显示加载器直到数据加载完成？

Answer 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>

Answer 2

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

showLoader : boolean = true;

然后，一旦获取数据，将值设置为false。

this.showLoader = false;

您可以使用* ng如果在模板上检查数据是否已加载，

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

Angular 7-如何显示加载程序，直到* ngFor加载数据？

2 个答案: