Collection-repeat directive for ionic 2

Ionic Framework ionic-v3
1

I was just wondering if there are any plans to implement the collection-reapeat directive for ionic 2 as well?

I am displaying a long list in my app (around 300 items at a time), and it would be better to actually just render the items that are displayed on the screen. I was thinking to implement my own solution for this, but if the collection-repeat is planned to be in Ionic 2 as well, I might as well just wait for it.

2

You could convert your collection to an array

this.items = Object.keys(myCollection).map(key => myCollection[key]);

3

Yep! We have already implemented it as virtualScroll

1 Like
4

Thanks for the answer. I had a quick look at that component a few days ago, but I thought it was designed ONLY for async list operations. After having a closer look, it seems to be the list I am looking for after all. Thanks :slight_smile:

5

I was able to use the virtualScroll, but I had to include some *ngIf statements in my html in order to avoid getting errors. I have one question though. I have a filter (pipe) that I want to use as well, but now it seems I can’t? I had the formula:

<ion-item *ngFor="#item of items | myPipe : criteria">....</ion-item>

is it possible to use pipes with <ion-item *virtualItem="#item" > ...</ion-item> as well?

6

I found what I think is a bug when using VirtualScroll. When you pop the last value of an array if items, the last item of the array does not delete in VirtualScroll (although well in the array).
I.e.
home.html

<ion-list [virtualScroll]="items" [approxItemHeight]="'100px'" *ngIf="contentLoaded">
    <ion-item-sliding *ngFor="let item; let index = index">
       <button ion-button color="danger" (click)="deleteFavorite(index)">
          <ion-icon name="ios-trash-outline"></ion-icon>
          Remove
       </button>

…

home.ts

deleteFavorite(index: number) {
this.items.splice(index);
}

The last array index is deleted, however still displays in VirtualScroll.
I had to revert to NgFor for now, which works as expected.