角度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 个复选框列表数组进行更新（使用数组进行过滤，因此管道上的“pure： false”）。

我的问题是，如何在ngFor之外获得FILTERED COUNT来显示管道的过滤结果计数？我有highlightedWorks。长度作为总结果计数，但还希望显示我当前使用管道过滤的结果数。

Answer 1

您可以在 *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;

Answer 2

我建议在组件代码中而不是在管道中执行过滤，原因如下： 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);
    }
}