ionic-framework: ionic2 VirtualScroll does not redraw with empty list

Short description of the problem:

VirtualScroll does not redraw with empty list. When modifying the item list, it is rightly updating, but when the list becomes empty nothing happens.

What behavior are you expecting?

When the item list becomes empty, nothing should be visible anymore.

Steps to reproduce:

Create a simple virtual scroll with an ion-list and ion-items
Add some action or button that empties the list
When that action triggers, nothing will happen

Which Ionic Version? 2.0.0-beta.6

Plunker that shows an example of your issue

http://plnkr.co/edit/xzwWnAtuzyQFkwQfrmAW?p=preview

Run ionic info from terminal/cmd prompt: (paste output below)

Your system information:

Cordova CLI: 6.0.0 Gulp version: CLI version 3.9.0 Gulp local: Local version 3.9.1 Ionic Framework Version: 2.0.0-beta.6 Ionic CLI Version: 2.0.0-beta.25 Ionic App Lib Version: 2.0.0-beta.15 OS: Distributor ID: Ubuntu Description: Ubuntu 16.04 LTS Node Version: v6.1.0

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 11
Comments: 36 (3 by maintainers)

Most upvoted comments

Guys, to avoid the performance issue when using the *ngIf workaround, just replace it with a [hidden] attribute using the opposite logic. Example:

<ion-list [hidden]="items.length == 0">

Hope the Ionic team can soon fix this bug, though.

AbrahamLopez10 on Nov 6, 2016

ionic 3.6 and still same problem. I use [hidden]="(__items?.length || 0) == 0" to resolve empty list and null either

decpio on Aug 17, 2017

fixed: @ViewChild('virtualScroll', { read: VirtualScroll }) virtualScroll: VirtualScroll;

setTimeout(() => {
                this.virtualScroll['_ctrl'].readReady.emit();
                setTimeout(() => this.virtualScroll['_ctrl'].writeReady.emit(), 300);
            }, 300)

442623641 on Feb 9, 2018

This is still an issue

Ross-Rawlins on Aug 4, 2017

Any updates on this issue? I am also experiencing it.

Tankatronic on Jul 20, 2017

solved it using this answer. https://stackoverflow.com/a/44041426

aminkor on Sep 20, 2017

I don’t know if this issue has already been fixed in latest beta.10, but anyway:

<ion-list *ngIf="items.length > 0" [virtualScroll]="items">
  <ion-item *virtualItem="let item" [style.width.%]="100">
    Item {{item.title}}
  </ion-item>
</ion-list>

mpaland on Jul 21, 2016