Angular 4：存储管道输出变量以供模板外部使用

Question

我知道在Angular 4中可以使用别名管道输出，但这只对模板内的别名有用。

例如：

<div *ngIf="race | async as raceModel">
    <h2>{{ raceModel.name }}</h2>
    <small>{{ raceModel.date }}</small>
</div>

这里的raceModel不能在ngIf之外被引用。在我的情况下，我使用管道对集合进行排序和过滤，并希望获取过滤后返回集合的长度，以便更新我的NgbPagination。

我的代码：

<tr *ngFor="let cust of customers | filterBy: searchFilters: true | orderBy: order: reverse: true: start: end as collection">
                        <td>{{cust.id}}</td>
                    </tr>
                    </tbody>
                </table>
                <ngb-pagination *ngIf="customers"
                                (pageChange)="pageChange($event)"
                                [collectionSize]="collection.length"
                                [(page)]="page"
                                [(pageSize)]="pageSize"
                                [maxSize]="5"
                                [rotate]="true"
                                [ellipses]="true"
                                [boundaryLinks]="true">
                </ngb-pagination>

如果可能的话，我不想把管道拖到视图模型中。有没有什么提示可以让我如何安全地从管道中获取变量以供稍后在视图中使用？

- Scott Clark

---

为什么不使用管道修改数据而不仅仅是在视觉上进行修改？ - mast3rd3mon

你能澄清一下你的意思吗？ - Scott Clark

也许这会回答你的问题：在Angular 2中，有没有一种方法将管道的结果保留在模板输入变量中？ - Top-Master

@Top-Master 这个链接指向了我的问题的第一部分提到的一个答案，但是并不足够。 - Scott Clark

好的，但是由于那篇帖子有更多的答案，有可能正确的答案会在那里发布（如果还没有）。 - Top-Master

Answer 1

目前我已经采取了以下措施：

<ngb-pagination *ngIf="customers"
 (pageChange)="pageChange($event)"
 [collectionSize]="(customers | filterBy: searchFilters: true: true)"
 [(page)]="page"
 [(pageSize)]="pageSize"
 [maxSize]="5"
 [rotate]="true"
 [ellipses]="true"
 [boundaryLinks]="true">
</ngb-pagination>

在过滤器管道的第二个true参数中，返回的是过滤后数组的长度而不是过滤后的数组本身。虽然有些巧妙但却很有效。

- Scott Clark