Angular 2 *ngFor 项目在循环外计数

Question

我是 Angular 的新手，我有一个愚蠢的问题，我如何才能显示 *ngFor 循环之外的实际项目数？

我正在使用这样的过滤器和分页管道

*ngFor="let item of items| filterBy: ['name','category']: queryString | paginate: config; let i = index; let c = count"

我知道有一个变量'count'，但当然它只在那个循环中可用，我怎样才能在组件中获取这个变量，我需要创建新组件，把它放在那个循环中并传递'count ' 通过指令还是有一些更简单、更清洁的方法？

Answer 1

使用 RxJS 主题对我有用。

在组件中创建一个变量来保存计数，即filterCount，并为类型number创建一个RxJS Subject。 让subscription 取消订阅OnDestroy 上的Observable

filterCount = 0;
filteredCountSubject = new Subject<number>();
subscription: Subscription;

订阅filteredCountSubject 上的OnInit 生命周期挂钩。

ngOnInit(): void {
    this.subscription = this.filteredCountSubject.subscribe((count) => {
        this.filterCount = count;
    });
}

在模板中，您可以在模板中的任何位置使用filterCount 显示计数。使用

<div>{{filterCount}}</div>

并将filteredCountSubject 作为参数发送到filterBy 管道。

<div *ngFor="let item of items| filterBy: ['name','category']: queryString: filteredCountSubject  | paginate: config; let i = index; let c = count"></div>

在filterBy 管道的transform 方法中，使用过滤数组的计数执行filteredCountSubject.next。即

transform(items: Array<any>, filterConfig: FilterCofig): Array<any> {
    // Arguments sent from HTML.
    const args = arguments;

    // CODE TO FILTER ITEMS BASED ON PARAMETERS.

    // Get the "filterredCountSubj" from arguments.
    // Remember that the argument index of "filteredCountSubject" is 3. As "items" is first argument.
    const filterredCountSubj = args[3];
    if (filterredCountSubj) {
        filterredCountSubj.next(items.length);
    }
    return items;
}

希望对你有帮助。