Ionic 2 & collection-repeat

问题

I'm making *ngFor working well with Ionic 2 but I'd like to use collection-repeat 'cause it is more adapted to wide range of data.

I'm loading the data in the construtor :

import {Page, NavController, NavParams} from 'ionic-angular';
import {ListData} from './list-data';

@Page({
    templateUrl: 'build/pages/list-browser/list-browser.html',
    providers: [ListData]
})
export class ListBrowserPage {
    static get parameters() {
        return [[NavController], [NavParams], [ListData]]; // ];
    }

    constructor(nav, navParams, listData){
        this.nav = nav;

        this.items =  listData.getItems(); 
        // listData.getItems() returns a 10 000 rows JSON : 
        //  [{
        //      name: 'Al Aporte', address: '201 Thunder Wagon Common, Cataract, RI, 02987-1016, US, (401) 747-0763',
        //      name: 'Jack Adit', address: '5198 Silent Parade, Round Bottom, MD, 21542-9798, US, (301) 060-7245',
        //      ...
        //  }]
    } 
}

Here is my view with *ngFor, there my injected data is working fine :

<ion-list>
  <ion-item *ngFor="#item of items"> 
    {{ item.name }} 
  </ion-item>
</ion-list>

But the same data loaded with collection-repeat doesn't work :

<ion-list>
    <ion-item collection-repeat="item in items">
        {{ item?.name }} 
    </ion-item>
</ion-list>

No data and no errors. I know that this is a lot of data and that I can split my JSON on the server side but that case is for benchmarking purposes (Ionic 1 & collection-repeat is far better than Ionic 2 & ngFor).

Does Ionic 2 beta include that directive ?

Thanks,

Dédé

回答1:

In Ionic 2, collection-repeat is renamed to Virtual Scroll.

So your Ionic 1 code in Ionic 2 will be like this :

<ion-list [virtualScroll]="items">
  <ion-item *virtualItem="#item">{{item.name}}</ion-item>
</ion-list>

You can read the Official Docs at http://ionicframework.com/docs/v2/api/components/virtual-scroll/VirtualScroll/

And an example by Josh Morony at http://www.joshmorony.com/boosting-scroll-performance-in-ionic-2/

回答2:

http://ionicframework.com/docs/v2/components/#lists

I do not think Ionic 2 beta include that directive. It is not in the doc.

btw,

benchmarking with ng-for do not have much meaning. It is slow anyway. We all know react native is much faster. :P

回答3:

Currently ionic2 does not use collection-repeat. ionic2 does have infinite scroll and virtual scroll .

you should also note that:

The new angular syntax will allow Angular to work with native web components and gain the benefits of using Web Components. Angular 2 will bring many exciting improvements over angular 1 and will soon allow us to create even more scalable web applications. - Cory Rylan

来源：https://stackoverflow.com/questions/35834620/ionic-2-collection-repeat

标签

angularjs

ionic-framework

ngfor