角度4:存储管道输出变量以在模板外部使用 [英] Angular 4: Store pipe output variable for use outside of template

问题描述

我知道我可以在角度4中对管道输出进行别名处理，但这仅在对其进行别名处理的模板内部有用.

I am aware I can alias pipe output in angular 4 but this is only useful inside the template where it is aliased.

示例

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

此处无法在ngIf之外引用raceModel.就我而言，我正在使用管道对集合进行排序和过滤，并希望在过滤后保留返回的集合的长度，以便更新NgbPagination.

Here raceModel cannot be referenced outside of the ngIf. In my case, I am ordering and filtering a collection with pipes and want to get a hold of the length of the returned collection after filtering so I can update my 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>

如果可以避免的话，我不想将管道拖到视图模型中.关于如何从管道中保护变量以供以后在视图中使用的任何提示?

I don't want to drag the pipes into the view model if I can avoid it. Any tips on how to secure a variable from a pipe for later use in the view?

推荐答案

暂时，我已经执行了以下操作:

For the time being I have resulted to doing the following:

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

其中过滤器管道的第二个真实参数返回的是过滤后数组的长度，而不是过滤后数组的长度.哈克，但效果很好.

Where the second true param for the filter pipe returns the length of the filtered array instead of the filtered array itself. Hacky but works just fine.

这篇关于角度4:存储管道输出变量以在模板外部使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！