Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ion-virtual-scroll does not update after an element is removed from the items array.

See original GitHub issue

Bug Report

Ionic version:

[x] 4.x

Current behavior:

When removing an element from the array associated with the [items] property of an ion-virtual-scroll, the item is not removed from the view.

Expected behavior:

The view should be updated and remove the item from the list. This was the behavior before upgrading to v4.

Steps to reproduce:

Related code:

  <ion-virtual-scroll [items]="items" approxItemHeight="100px">
    <ion-item-sliding *virtualItem="let item">

      <ion-item>
        <ion-thumbnail slot="start">
          <ion-img src="{{ item.image }}"></ion-img>
        </ion-thumbnail>

        <p>{{ item.title }}</p>
      </ion-item>

      <ion-item-options side="end">
        <ion-item-option (click)="remove(item)">Remove</ion-item-option>
      </ion-item-options>

    </ion-item-sliding>
  </ion-virtual-scroll>


  remove(item) {
    this.items.splice(this.items.indexOf(item), 1);
  }

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.10.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0
   @angular-devkit/build-angular : 0.11.4
   @angular-devkit/schematics    : 7.1.4
   @angular/cli                  : 7.1.4
   @ionic/angular-toolkit        : 1.2.2

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : ios 4.5.5, osx 4.0.2
   Cordova Plugins       : cordova-plugin-ionic 5.2.1, cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.2, (and 13 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/caseertel/Library/Android/sdk)
   NodeJS            : v8.9.0 (/usr/local/bin/node)
   npm               : 5.5.1
   OS                : macOS Mojave
   Xcode             : Xcode 10.1 Build version 10B61

Issue Analytics

State:
Created 5 years ago
Comments:14 (3 by maintainers)

Top GitHub Comments

1reaction

Silvest89commented, Feb 6, 2019

Have you tried

this.items.splice(this.items.indexOf(item), 1);
this.items = [...this.items];

0reactions

ionitron-bot[bot]commented, May 12, 2019

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.

Top Results From Across the Web

Ionic Virtual Scrolling Not Updating when new Item is pushed ...

Very Simple just do this how @miloth has done , let me simplify the code for you. Step 1. add an ID #listedLoadedPlacesScroll...

How to reset/refresh virtualScroll headerFn on data change?

I'm using Ionic virtual scroll w/a custom headerFn, but it doesn't reset/remove the headers after changing the data.

ngx-virtual-scroller - npm

ngx-virtual-scroller. Virtual Scroll displays a virtual, "infinite" list. Supports horizontal/vertical, variable heights, & multi-column.

Scrolling | Angular Material

Loading hundreds of elements can be slow in any browser; virtual ... *cdkVirtualFor caches previously created views after they are no longer needed....

Getting to Know the Angular CDK Virtual Scroll Feature

The problem with that is that so many elements in the DOM can cause slow initial rendering, laggy scrolling, and dirty checking on...