Question

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

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

以下是调用组件使用的位置：

{{1}}

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

我的问题是，如何在ngFor之外获得 FILTERED COUNT 来显示管道的过滤结果数？我将highlightedWorks.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;

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

2 个答案: