Question

我正在使用ion-skeleton-text为Ionic 4.2中的Firebase中的数据列表设置伪造的显示，以指示用户正在加载数据。但这不起作用。

<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 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" 条件使用 mates 变量，因为 mates直到您的getData()方法已完成。。这就是为什么您看不到 ion-skeleton-text 的原因。对 *ngFor 使用另一个变量，而不是 ngIf="!mates" 中的 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>

希望这会对您有所帮助。

遇到表达式时为什么不显示离子骨架文本

1 个答案: