时间戳

首页 > 解决方案 > 为什么遇到表达式时不显示离子骨架文本

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

问题描述

我正在为 Ionic 4.2 中来自 firebase 的数据列表设置一个假显示，用于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 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

标签： angularionic-framework

解决方案

不要将mates变量用于*ngFor内部ngIf="!mates"条件，因为在您的方法完成之前，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>

希望这会帮助你。

推荐阅读