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

并为类型

Subject

创建一个 RxJS

number

。 请

subscription

取消订阅

Observable

 上的 

OnDestroy

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>

在

transform

管道的

filterBy

方法中，使用过滤数组的计数执行

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

希望有帮助。

Answer 2

**您可以构建一个没有 Rxjs 的解决方案 ** 假设你有一系列物品

• 在 ngIf 指令中使用 ngFor 指令，然后您可以轻松获取过滤后的数组的计数

<ng-container *ngIf= " (items | searchFile: 'searchItem') as filteredItems">
  {{filteredItems.length}}
  <ng-container *ngFor="let item of filteredItems">
     {{items}}
  </ng-container>
</ng-container>