Remove Item from Virtual Scroll

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> {{ }}

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

removeRow(i:number) {

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?

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.

Did you find any solutions for this?

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.;

And in my case in my Component constructor

friendshipProvider.updateFriendships.subscribe((value: boolean) => {
        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.