离子2&收集重复 [英] Ionic 2 & collection-repeat
问题描述
我正在制作* ng用于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.
我在construtor中加载数据:
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',
// ...
// }]
}
}
这是我的* ngFor视图,我的注入数据工作正常:
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>
但是使用collection-repeat加载的相同数据不起作用:
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>
没有数据也没有错误。我知道这是很多数据,我可以在服务器端拆分我的JSON,但这种情况是出于基准测试的目的(Ionic 1& collection-repeat远比Ionic 2& ngFor好)。
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).
Ionic 2 beta是否包含该指令?
Does Ionic 2 beta include that directive ?
谢谢,
Dédé
推荐答案
在Ionic 2中,collection-repeat被重命名为Virtual Scroll。
In Ionic 2, collection-repeat is renamed to Virtual Scroll.
所以Ionic 2中的Ionic 1代码将是这样的:
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>
您可以在 http://ionicframework.com/docs/v2/api/components/virtual-scroll/VirtualScroll/
Josh Morony的例子 http://www.joshmorony.com/boosting-scroll-performance-in-ionic-2/
And an example by Josh Morony at http://www.joshmorony.com/boosting-scroll-performance-in-ionic-2/
这篇关于离子2&收集重复的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!