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

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 中显示 filteredItems 而不是原始列表：

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

Answer 2

这是管道过滤器与 angular 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>

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

John 发布的答案（一个很好的答案）但您必须在每次更改检测时激活它，而不是将其作为渲染的一部分

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

How to use pipes (filters) with ionic2's virtualScroll

ionic2