Ionic 2/3 - Probleme mit * ngFor - nur ein paar Elemente laden, Sperren Telefon Bildschirm lädt den Rest

Question

Ich habe Probleme mit * ngFor in Ionic 2. Grundsätzlich ist das Ziel, eine Menge von Miniaturansichten und Details zu drucken Bildschirm in einem Galeriestil. Vor dem Laden der Bilder lade ich die Seite mit dem Bildnamen und einem Standard-Ionen-Icon eines Bildes vor. Dann beginnt es, die Thumbnails basierend auf dem Dateipfad zu laden.

Allerdings habe ich Probleme mit * ngFür nur laden 50 Ionen-Symbol und Miniaturbildname auf einmal, für den Rest zu laden Ich muss den Telefonbildschirm sperren und entsperren es erneut. Sie laden alle ziemlich schnell - nachdem der Bildschirm nur für zwei Sekunden gesperrt wurde. Es gibt ungefähr 900 Bilder, die geladen werden, BTW. Ich lade auch alle Bilddaten, bevor ich versuche, die Informationen im * ngFor anzuzeigen. Es scheint eher wie ein Bug oder eine Einschränkung von * ngFor? wie es gerade lädt, wenn der Bildschirm gesperrt ist.

Gibt es eine bessere Möglichkeit, diese vielen Bilder zu laden? Ich brauche wirklich keinen asynchronen Strom zwischen dem Array und den Bildern auf dem Bildschirm, da es sich nach dem Laden nicht ändert. Ich habe versucht, nur HTML-Elemente mit einer for-Schleife in die Dom einfügen, aber das geht gegen den eckigen Weg und schien länger zu laden.

Component 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> 

Answer 1

Das Problem war mit * ngFor nicht aktualisiert, wenn die beobachtbare die Bilder Details zurück (directoryImages Array) aus dem Verzeichnisdienst. Um dies zu beheben, musste ich das ngFor auslösen, um das Array mit changeDetectorRef.detectChanges() zu überprüfen.

Schritte:

1. Import ChangeDetectorRef zur Komponente:

   import { ChangeDetectorRef } from '@angular/core';

2. Geben einen Verweis auf den Dienst ChangeDetectorRef im Konstruktor:

constructor(private ref:ChangeDetectorRef)

3. Auslöser der * ngFor mit dem changeDectorRef wenn Daten aus dem beobachtbaren
aktualisiert wurde

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