Почему ионный каркасный текст не отображается при выполнении выражения

Question

Я настраиваю фальшивое отображение списка данных из firebase в Ionic 4.2, используя ion-skeleton-text, чтобы указать пользователю, что данные загружаются.Но это не работает.

<ion-list *ngIf= "mates">
<div *ngFor= "let mate of mates">
       <ion-item (click)="View(mate)" class="item" *ngIf="mate.matric != mat" >

           <ion-avatar slot="start">
             <img src="{{mate.photourl}}" />
           </ion-avatar>
           <ion-label>
             <p>{{mate.firstname}} {{mate.lastname}}</p>
             <h5>{{mate.matric}}</h5>
           </ion-label>
           <ion-icon ios="ios-arrow-forward" md="md-arrow-forward"></ion-icon>
         </ion-item>
       </div>
       </ion-list>

         <ion-list *ngIf="!mates">
           <div *ngFor= "let mate of mates">
           <ion-item class="item"  *ngIf="mate.matric != mat">

               <ion-avatar slot="start">
                 <ion-skeleton-text animated></ion-skeleton-text>
               </ion-avatar>
               <ion-label>
                 <p><ion-skeleton-text animated style="width:150px"></ion-skeleton-text></p>
                 <h5><ion-skeleton-text animated style="width:100px"></ion-skeleton-text></h5>
               </ion-label>
             </ion-item>
           </div>
       </ion-list> 

 getData() {
        this.afs.collection('userProfile').valueChanges().subscribe(data => {
           this.mates = data;
           });
      }

Ионные:

   ionic (Ionic CLI)          : 4.2.0 (C:\Users\tolutronics\node_modules\ionic)
   Ionic Framework            : @ionic/angular 4.5.0
   @angular-devkit/core       : 7.3.9
   @angular-devkit/schematics : 7.3.9
   @angular/cli               : 7.3.9
   @ionic/ng-toolkit          : 1.1.0
   @ionic/schematics-angular  : 1.0.7

Cordova:

   cordova (Cordova CLI) : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms     : android 8.0.0, ios 5.0.1
   Cordova Plugins       : not available

Система:

 (C:\Program Files (x86)\Android\android-sdk)
   NodeJS            : v10.15.3 (C:\Program Files\nodejs\node.exe)
   npm               : 6.4.1
   OS                : Windows 7

Answer 1

Не используйте сопряжения переменную для *ngFor внутри ngIf="!mates" условия, потому что сопряжения не определены, пока ваш getData() метод не будет завершен. Вот почему вы не могли видеть ion-skeleton-text.Используйте другую переменную для *ngFor вместо сопряжения внутри ngIf="!mates" с некоторыми фиктивными данными.Давайте возьмем matesDymmy в качестве фиктивной переменной с некоторыми фиктивными данными следующим образом.

TS

export class AppComponent {
  mates: any;
  matesDymmy: any = ["dummy1", "dummy2", "dummy3" ];
}

HTML

<ion-list *ngIf= "mates">
  <div *ngFor= "let mate of mates">
         <ion-item (click)="View(mate)" class="item" *ngIf="mate.matric != mat" >

             <ion-avatar slot="start">
               <img src="{{mate.photourl}}" />
             </ion-avatar>
             <ion-label>
               <p>{{mate.firstname}} {{mate.lastname}}</p>
               <h5>{{mate.matric}}</h5>
             </ion-label>
             <ion-icon ios="ios-arrow-forward" md="md-arrow-forward"></ion-icon>
        </ion-item>
  </div>
</ion-list>

 <ion-list *ngIf="!mates">
   <div *ngFor= "let mate of matesDymmy">
     <ion-item class="item"  *ngIf="mate.matric != mat">

         <ion-avatar slot="start">
           <ion-skeleton-text animated></ion-skeleton-text>
         </ion-avatar>
         <ion-label>
           <p><ion-skeleton-text animated style="width:150px"></ion-skeleton-text></p>
           <h5><ion-skeleton-text animated style="width:100px"></ion-skeleton-text></h5>
         </ion-label>
       </ion-item>
   </div>
</ion-list> 

Надеюсь, это поможет вам.