Question

我正在尝试使用虚拟滚动显示Ionic 3中的图片列表。

我的代码如下：图片

 <div *ngIf="picturesByChildIndex && picturesByChild">
  Pictures
  <div *ngFor="let child of picturesByChildIndex; index as childIndex">
    <div [virtualScroll]="picturesByChild[childIndex]" [approxItemHeight]="pictureSize + 'px'" [approxItemWidth]="pictureSize + 'px'" [bufferRatio]="5">
      <div class="">
        {{picturesByChild[childIndex] | json}}
      </div>
      <div *virtualItem="let pictureEntity" class="image-container"
      [style.width]="pictureSize + 'px'" [style.height]="pictureSize + 'px'"
      (click)="onOpenPicture(pictureEntity?.$key, $event)">
      <ion-img [src]="pictureEntity?.thumb" class="image" tappable></ion-img>
    </div>
  </div>

  </div>

</div>

我的控制器中的对象：

picturesByChildIndex ["child2", "child1", "-Kr2WLq5XxjnrDzAizTF"]
picturesByChild (3) [Array(3), Array(4), Array(3)]
picturesByChild[0] "child2"
  insertTimestamp: 1500362912
  thumb: "https://storage.googleapis.com/..."
  $exists: ƒ ()
  $key: "-KpJaJATCnHtaSU1Pjqn"

最后，pictureSize是125

知道图片没有显示的原因吗？我只看到文字Pictures，没有别的

Answer 1

I got the same error as you and the solution was pretty simple: I had to remove the virtualScroll from the *ngIf block (or ngFor in your case).

Apparently the condition was interacting with the load of the scroll.

I placed it out of the condition and used a workaround to reenable the condition on the array I was passing to the virtualscroll.

I hope it helps someone that get here with the same problem

Ionic Virtual Scroll不显示

1 个答案: