首页 文章

Ionic 2/3 - * ngFor的问题 - 只加载一些元素，锁定手机屏幕加载其余元素

提问于
浏览 次
0

我在Ionic 2中使用* ngFor时遇到问题 . 基本上，目的是以画廊风格将大量缩略图和细节打印到屏幕上 . 在加载图像之前，我使用图像名称和图像的标准离子图标预加载页面 . 然后它将开始根据文件路径加载缩略图 .

但是，我遇到问题* ng只能一次加载50个离子图标和缩略图名称，其余要加载我必须锁定手机屏幕并再次解锁 . 它们几乎都可以直接加载 - 在屏幕被锁定仅仅两秒钟之后 . 有大约900张图像正在加载Btw . 在尝试显示* ngFor中的信息之前，我还要加载所有图像数据 . 它似乎更像是* ngFor的错误或限制？因为它在屏幕锁定时会立即加载 .

是否有更好的方法来加载这么多图像？我真的不需要屏幕上的数组和图像之间的异步流，因为一旦加载它就不会改变 . 我确实尝试将带有for循环的html元素插入到dom中，但这与角度方式相反，并且似乎需要更长时间才能加载 .

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>
angular ionic-framework ionic2 ngfor

1 回答

  • 0

    问题是* ng在observable从directoryService返回图像详细信息（directoryImages数组）时不更新 . 为了解决这个问题，我必须使用changeDetectorRef.detectChanges（）来触发ngFor重新检查数组 .

    Steps:

    • 将ChangeDetectorRef导入组件：

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

    • 在构造函数中传递对ChangeDetectorRef服务的引用：

    constructor(private ref:ChangeDetectorRef)

    • 当从observable更新数据时，使用changeDectorRef触发* ngFor

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

    回复于

相关问题