Angular 2 - 在调用组件中获取管道的长度

Question

我在 Angular2 中有一个简单的自定义管道，用于根据类型 ID 和年份数组过滤数组，我将其定义为：

@Pipe({name: 'highlightedWorksFilter', pure: false})
export class HighlightedWorksFilterPipe implements PipeTransform {
transform(works: IHighlightedWork[], activityTypeIds: any[], activityYears: any[]){
    if (works && works.length) {
        return works.filter(work => {
            if(activityTypeIds.findIndex(i => i.id === work.activityTypeId && i.checked) === -1) {
                return false;
            }
            if (activityYears.findIndex(i => i.year === work.activityYear && i.checked) === -1) {
                return false;
            }
            return true;
        });
    }
    else {
        return works;
    }
}
}

这是从调用组件中使用它的地方：

<div>FILTERED COUNT / {{highlightedWorks.length}}</div>
<div *ngFor="let work of highlightedWorks | highlightedWorksFilter: myActivityTypeIds:myActivityYears">
 {{work.Title}}
</div>

过滤器工作完美，并根据类型和年份的 2 个复选框列表数组进行更新（使用数组进行过滤，因此管道上的“纯：假”）。

我的问题是，如何在 ngFor 之外获取 FILTERED COUNT 以显示管道的过滤结果计数？我将突出显示的Works.length 作为结果总数，但还想显示我目前使用管道过滤了多少结果。

Answer 1

我建议在组件代码中而不是在管道中执行过滤，原因如下：https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe

然后，您可以访问过滤列表作为组件类的属性，以便更轻松地获取其长度。

这是一个例子

import { Component, OnInit } from '@angular/core';

import { IProduct } from './product';
import { ProductService } from './product.service';

@Component({
    templateUrl: './product-list.component.html'
})
export class ProductListComponent implements OnInit {

    _listFilter: string;
    get listFilter(): string {
        return this._listFilter;
    }
    set listFilter(value: string) {
        this._listFilter = value;
        this.filteredProducts = this.listFilter ? this.performFilter(this.listFilter) : this.products;
    }

    filteredProducts: IProduct[];
    products: IProduct[] = [];

    constructor(private _productService: ProductService) {

    }

    performFilter(filterBy: string): IProduct[] {
        filterBy = filterBy.toLocaleLowerCase();
        return this.products.filter((product: IProduct) =>
              product.productName.toLocaleLowerCase().indexOf(filterBy) !== -1);
    }

    ngOnInit(): void {
        this._productService.getProducts()
                .subscribe(products => {
                    this.products = products;
                    this.filteredProducts = this.products;
                },
                    error => this.errorMessage = <any>error);
    }
}

Answer 2

您可以在 *ngFor 上使用一个简单的索引，最后一个值是最后一个过滤元素的索引。您将 1 添加到该值，您就有了过滤列表的长度。

<div *ngFor="let work of highlightedWorks | highlightedWorksFilter: myActivityTypeIds:myActivityYears; let i=index" [i]="i">
 {{work.Title}} Index: {{i+1}}
</div>

您还必须将值输入到您的组件中才能正常工作：

@Input() i: number;