离子2和收集重复

Question

我正在制作*ng用于与Ionic 2合作,但我想使用collection-repeat'因为它更适合于广泛的数据.

我在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',
        //      ...
        //  }]
    } 
}

这是我对*ngFor的看法,我的注入数据工作正常:

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

但是使用collection-repeat加载的相同数据不起作用:

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

没有数据也没有错误.我知道这是很多数据,我可以在服务器端拆分我的JSON,但这种情况是出于基准测试的目的(Ionic 1和collection-repeat远比Ionic 2和ngFor好).

Ionic 2 beta是否包含该指令？

谢谢,

德德

Answer 1

在Ionic 2中,collection-repeat被重命名为Virtual Scroll.

因此,Ionic 2中的Ionic 1代码将如下所示:

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

您可以在http://ionicframework.com/docs/v2/api/components/virtual-scroll/VirtualScroll/上阅读官方文档.

Josh Morony在http://www.joshmorony.com/boosting-scroll-performance-in-ionic-2/上举了一个例子