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

[fdelayen]

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:

1. Create a simple virtual scroll with an ion-list and ion-items
2. Add some action or button that empties the list
3. 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

[ghenry22]

I have also seen this when using a search box to filter a list. If there is a match to the search term the list correctly updates. If there is no match (ie empty list) nothing happens

[mpaland]

Please fix this soon, this makes the virtualscroll list pretty unusable.
I'm using a special "List empty" item as workaround by now, but that's not really nice.

[fdelayen]

You can still add an ngIf on that element for the moment, works like a charm 😉

[WebEnzyme]

@fdelayen @mpaland Could you kindly share your workarounds?
where should I add the ngIf and what is the expression?

<ion-list [virtualScroll]="items">
  <ion-item *virtualItem="#item" style="width:100%;">
    Item {{item.title}}
  </ion-item>
</ion-list>

[mpaland]

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>

[WebEnzyme]

@mpaland Thanks, I'm on beta 10 and still facing the issue.
I tried the ngIf, didnt work for me. Probably because I'm using a pipe.
ORIGINAL EXCEPTION: TypeError: Cannot read property 'length' of undefined

[jarrodkoch]

@WebEnzyme , if you're still having problems with the *ngIf you'll want to make sure that 'items' is being initialized.

[comfortme]

i am also using *ngIf="items.length > 0" workaround for the same problem beta.11

[mbrookson]

I have tried using the *ngIf fix but when the list is shown again, the performance is terrible. The list has a terrible lag and is impossible to scroll on the device (testing on iOS)

[jafaripur]

Same for me in RC0. Work and list fill up but after update model to empty [] does not update list.

<ion-list *ngIf="showingSection == 'list'" [virtualScroll]="storesList?.items" approxItemHeight="70px">
<ion-item *virtualItem="let item" text-wrap>

[mpaland]

Virtual Scroll component didn't get any love for a longer time. :-(
Guess, ionic team has a focus on the final release, so this minor bug may get fixed later on...

[zakton5]

Still an issue...

[aarnaudiktons]

I have implemented this solution, until Ionic resolve the issue
Always return a file with Id=0, after get the items do item.push('Id':0,etc.)
if you have a filter add (actualcondition || item.Id==0) for always return this file
In the label, button, input etc inside the ion-item *virtualitem, put [Hidden]="item.Id==0", this not affect the perfomance, not put in the ion-item *virtualitem this will affect the perfomance

[AbrahamLopez10]

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.

[pavimus]

catched this issue just now in rc2

[OmarHassan25]

This Issue still exists in RC2

[notsure]

still having this problem in 2.8.0

[aarnaudiktons]

still having also the same problem

[manucorporat]

@notsure @aarnaudiktons can you please fill a new issue? I can't reproduce this version in 2.2

@notsure ionic 2.8 does not exist

[ghenry22]

@manucorporat - This looks good for me in 2.2.0

[dspachos]

Still have the issue, when list is empty.
Quick and dirty solution, push something e.g.

if(this.speakers.length==0) { 
                    this.speakers.push( {'none':1} );
                  }

and then check it, e.g.
<ion-card class="speaker-card" *ngIf="speaker.none==null">

I implemented a filter in authors tab in the Conference app example this way, works fine

[parkbroom]

@dspachos how did you use this with virtualscroll? mind showing me the full html?

[dspachos]

Here you are:

<ion-content class="outer-content speaker-list">
  <ion-list [virtualScroll]="speakers">
    <ion-grid fixed>
      <ion-row align-items-stretch>

        <ion-col col-12 col-md-6 align-self-stretch align-self-center *virtualItem="let speaker" approxItemHeight="457px">

          <ion-card class="speaker-card" *ngIf="speaker.none==null">
            <ion-card-header>
..

hope it helps!

[Tankatronic]

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

[zakton5]

Still experiencing this problem

[Stormcore]

Still reproduced

[Stormcore]

Please reopen

[Ross-Rawlins]

This is still an issue

[decpio]

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

[aminkor]

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

[savs90]

ionic 3.7.1 and still the same problem

[demym]

Some news about the virtualscroll issues ? I'm on 3.10.3 and still virtualscroll not working correctly; well, sometimes it does, but have issues as:

• refresh items array --> sometimes i get a blank view...
• overlapping items (i'm using it in a chat page which has some differences in items height); this happens only from time to time...

Very sorry as virtualscroll is really a plus and helps get performances at the top, but the random issues stop me to use it in production

[442623641]

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

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

[lordgreg]

@442623641 so to understand the "fix":

Every 300ms we send an READY event for virtualscroll and after 300ms after submitting an event, we send writeReady event.

What that basically means is, that VirtualScroll redraws every 300ms?

[jgpATs2w]

My solution came using the renderVirtual method of VirtualScroll directive. In my case the 'white issue' came when the input array of virtualscroll

pages/mypage/mypage.hml
<ion-list #virtualScroll [virtualScroll]="myarray"

pages/mypage/mypage.ts

 import { ViewChild } from '@angular/core';
 import { VirtualScroll } from 'ionic-angular';
 ...
export class MyPage {
  @ViewChild('virtualScroll', { read: VirtualScroll }) virtualScroll: VirtualScroll;
   ...
    ionViewWillEnter(){
        // code that updates data inside myarray
        this.virtualScroll.renderVirtual(true);
    }

There is also writeUpdate method, that performs some extra calculations. Someone knows which is better?

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.