循环外的项目计数角为2*Ngfor

Question

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

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

*ngfor=“让item of items filterby:['name','category']:queryString paginate:config；let i=index；let c=count”

我知道有一个变量“count”，但当然它只在那个循环中可用，我如何在组件中获得这个变量，我需要创建新的组件，把它放在那个循环中，通过指令传递“count”还是有更简单、更干净的方法？

Answer 1

使用RxJS主题对我有效。

在该组件中，创建一个保存计数的变量，即filtercount，并为类型number创建一个RxJSsubject。让订阅取消订阅ondestroy上的可观察

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

订阅oninit生命周期挂钩上的FilteredCountSubject。

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

希望能有所帮助。