Angular 7 - Как показать загрузчик, пока * ng для загрузки данных?

Question

Как показать загрузчик, пока * ng для загрузки данных?

<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

Вы должны иметь логическую переменную, определенную на уровне вашего компонента как,

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>

Answer 2

Вы можете добавить *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>