离子 2 和收集重复答案

【问题标题】：Ionic 2 & collection-repeat离子 2 和收集重复
【发布时间】：2016-06-20 11:09:30
【问题描述】：

我正在使 *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 和 collection-repeat 比 Ionic 2 和 ngFor 好得多）。

Ionic 2 beta 是否包含该指令？

谢谢，

德德

【问题讨论】：

标签： angularjs ionic-framework ngfor

【解决方案1】：

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

我不认为 Ionic 2 beta 包含该指令。它不在文档中。

顺便说一句，

使用 ng-for 进行基准测试没有太大意义。无论如何它很慢。我们都知道 react native 要快得多。 :P

【讨论】：

React Native 看起来很有趣。我肯定会问 Ionic 团队是否计划将 Collection-repeat 集成到 Ionic 2 中。

【解决方案2】：

目前 ionic2 不使用收集重复。 ionic2 确实有 infinite scroll 和 virtual scroll 。

您还应该注意：

新的 Angular 语法将允许 Angular 与原生网络一起工作组件并获得使用 Web 组件的好处。角 2 将在 Angular 1 上带来许多令人兴奋的改进，并且很快就会允许我们创建更具可扩展性的 Web 应用程序。 - 科里·莱兰

【讨论】：

【解决方案3】：

在 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/

【讨论】：