Question

我想在VirtualScroll上使用过滤器（管道）。在我使用VirtualScroll之前，我使用以下公式在ion-item上进行了正常的for循环：

<ion-item *ngFor="#item of items | myPipe : criteria">....</ion-item>

是否可以使用<ion-item *virtualItem="#item" > ...</ion-item>的管道？或者我是否必须在控制器的列表中执行管道？

Answer 1

我最终在控制器中使用了一个管道，创建了一个如下所示的filteredItems列表：

filteredItems = new MyPipe().transform(this.items, ["criteria"]);

然后，我在VirtualScroll而不是原始列表中显示filteredItem：

<ion-list [virtualScroll]="filteredItems">
  <ion-item *virtualItem="#item">
  </ion-item>
</ion-list>

Answer 2

以下是角度为rc3的管道过滤器的使用示例。

<ion-list [virtualScroll]="items | SearchPipe:searchBar | SortItems:orderType">
    <button ion-item *virtualItem="let item">
        <span [innerHtml]='item.Name | BoldPipe:searchbar'></span>
        <span [innerHtml]='item.Code | BoldPipe:searchbar'></span>
    </button>
</ion-list>

管道应该应用在列表而不是项目上。

约翰发布的答案（一个很好的答案）但是你必须在每次变化检测时激活它而不是它是渲染的一部分

如何使用ionic2的virtualScroll管道（过滤器）

2 个答案: