Ionic 2/3 - * ngFor問題 - 只有少數元素加載，鎖定手機的屏幕加載其餘

我在使用* ngFor在Ionic 2中遇到了問題。基本上目的是打印很多縮略圖和細節畫廊風格的畫面。在加載圖像之前，我預加載圖像名稱和圖像的標準離子圖標。然後它將開始基於文件路徑加載縮略圖。Ionic 2/3 - * ngFor問題 - 只有少數元素加載，鎖定手機的屏幕加載其餘

但是，我遇到的問題* ngFor一次只加載50個離子圖標和縮略圖名稱，其餘加載我必須鎖定手機屏幕並再次解鎖。他們幾乎都會馬上加載 - 屏幕鎖定兩秒後。有大約900多個圖像被加載順便說一句。在嘗試在* ngFor中顯示信息之前，我還要加載所有圖像數據。它看起來更像是* ngFor的缺陷或侷限性？因爲它在屏幕鎖定時直接加載。

有沒有更好的方式來加載這麼多的圖像？我真的不需要在屏幕上的數組和圖像之間的異步流，因爲一旦它加載它不會改變。我確實嘗試用for循環向dom插入html元素，但這種做法違背了角度，似乎需要更長時間才能加載。

元器件HTML：

<ion-content> 
    <button style="height:200px;" (click)="buttonClicked()">Show images</button> 

    <ion-grid> 
    <ion-row> 

     <ion-col col-4 *ngFor="let directory of directorySubDirectories"> 
      <div class="directory-folder"></div> 
      <div class="item-name">{{directory.name}}</div> 
     </ion-col > 
    </ion-row > 

    <ion-row> 
     <ion-col col-4 *ngFor="let image of directoryService.getDirectoryImages()"> 
      <div class="image-container"> 
       <ion-icon name="images" class="image-icon" center></ion-icon> 
      </div> 
      <div class="item-name">{{image.name}}</div> 
     </ion-col> 
    </ion-row> 
    </ion-grid> 

</ion-content>

來源

2017-10-12 niroice

是否directorySubDirectories來自服務呼叫更新？ – Swoox

是的，它同樣適用於服務中的file.listdir。我將圖像中的文件夾分隔到不同的陣列中。 – niroice

** directorySubDirectories **來自異步調用，所以必須使用異步管道* ngFor =「let directorySubDirectories | async」的目錄' – Swoox

的問題是與* ngFor時可觀察到的返回從DirectoryService中的圖像細節（directoryImages陣列）不更新。要解決這個問題，我不得不觸發ngFor使用changeDetectorRef.detectChanges（）重新檢查數組。

步驟：

導入ChangeDetectorRef到組件：

import { ChangeDetectorRef } from '@angular/core';
傳遞在構造到ChangeDetectorRef服務的引用：

constructor(private ref:ChangeDetectorRef)

觸發的*與changeDectorRef ngFor當數據已經被從可觀察

this.directoryService.getDirectoryImages().subscribe((result)=>{ this.directoryImages = result; this.ref.detectChanges(); });

來源

2017-10-12 11:15:49 niroice

Ionic 2/3 - * ngFor問題 - 只有少數元素加載，鎖定手機的屏幕加載其餘

回答

相關問題