Remove Item from Virtual Scroll

Ionic Framework ionic-v3
1

I have a very simple virtual scroll example and use case. I render 500 list-items (which works great!) and list items can be removed by the user, by click on a button:

<ion-list [virtualScroll]="rows">
  <ion-item *virtualItem="let row; let i = index">      
    <button ion-button (remove)="removeRow(i)"></button> {{ row.name }}
  </ion-item>
</ion-list>

code for handling button click (removeRow(index)):

removeRow(i:number) {
    this.rows.splice(i,1);
}

With this code the list doesn’t get changed, although the index is removed from the base array. So my question:

How to remove an item of a virtual-scroll list array and display the result?

2

I think you shouldn’t want to really remove an item on the virtual scroll, since it’s precalculated. You can achieve this by forcing a full redraw, but if I were you I wouldn’t go with that solution since it’s a very expensive operation to perform.

3

Did you find any solutions for this?

4

I have a simmilar problem wiht ion-list.

I change the array in a provider. The onlie solution I found is using an observable.

In the provider


import { Subject } from 'rxjs/Subject';
public updateFriendships = new Subject();

// Call this whenthe array is changed. You can send an object too.
this.updateFriendships.next(true);

And in my case in my Component constructor

friendshipProvider.updateFriendships.subscribe((value: boolean) => {
        console.log('friendshipProvider.updateFriendships.subscribe');
        this.friendships = friendshipProvider.returnFriendships();
      });

// returnFriendships() returns the array from the provider and assigns it to the array of the component. Then the html page get updated automatically.