Ionic 2 & 收集-重复
Ionic 2 & collection-repeat
我正在使 *ngFor 与 Ionic 2 配合得很好,但我想使用 collection-repeat 因为它更适合广泛的数据。
我正在构造器中加载数据:
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 和收集重复比 Ionic 2 和 ngFor 好得多)。
Ionic 2 beta 是否包含该指令?
谢谢,
德德
http://ionicframework.com/docs/v2/components/#lists
我认为 Ionic 2 beta 不包含该指令。它不在文档中。
顺便说一句,
用 ng-for 进行基准测试没有太大意义。反正它很慢。我们都知道 React Native 要快得多。 :P
目前ionic2不使用collection-repeat。
ionic2 确实有 infinite scroll and virtual scroll .
您还应该注意:
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
在 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/
上举了一个例子
我正在使 *ngFor 与 Ionic 2 配合得很好,但我想使用 collection-repeat 因为它更适合广泛的数据。
我正在构造器中加载数据:
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 和收集重复比 Ionic 2 和 ngFor 好得多)。
Ionic 2 beta 是否包含该指令?
谢谢,
德德
http://ionicframework.com/docs/v2/components/#lists
我认为 Ionic 2 beta 不包含该指令。它不在文档中。
顺便说一句,
用 ng-for 进行基准测试没有太大意义。反正它很慢。我们都知道 React Native 要快得多。 :P
目前ionic2不使用collection-repeat。 ionic2 确实有 infinite scroll and virtual scroll .
您还应该注意:
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
在 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/
上举了一个例子