使用 *ngFor 迭代数组，同时过滤某个属性 [英] Using *ngFor to iterate over an array while also filtering on a certain property

问题描述

在我的 Angular 2 应用程序中，我想知道是否有一种方法可以迭代数组，同时过滤 *ngFor 块中的某个属性.所以语法看起来像这样:

In my Angular 2 app I am wondering if there's a way I can iterate over an array while also filtering on a certain property in the *ngFor block. So the syntax would look something like this:

<ng-template *ngFor="let flag['completed === false'] of service.flags">
    <span class="standard-flag" 
        [class.hold-flag]="flag?.flagType === 'hold'">Flag
    </span>
</ng-template>

所以基本上逻辑是，对于数组中存在的每个对象(flag"是一个对象)，其中completed"属性设置为false"，返回该值.与其先遍历数组，然后使用 *ngIf 进一步过滤，不如在 *ngFor 块中同时执行这两项操作，这会很好(并且在我的特定情况下非常有用).可能吗?

So basically the logic is, for each object ("flag" is an object) in the array that exists, where the "completed" property is set to "false", return that value. Rather than first iterating over the array, and then using *ngIf to filter further, it'd be nice (and very helpful in my particular situation) if I could do both in the *ngFor block. Possible?

我对这种构造特别感兴趣的原因是因为我只想返回已完成"为假"的第一个值，并且我可以使用let i = index"来处理它在这种情况下， *ngFor 块.但我不想返回所有标志对象中的第一个，只返回已完成"属性设置为false"的标志对象.

The reason why I'm interested in this kind of construction specifically is because I want to return only the first of the values where "completed" is "false", and I could handle that with "let i = index" in the *ngFor block in that case. But I don't want to return the first of ALL flag objects, just the flag objects where the "completed" property is set to "false".

推荐答案

使用管道进行过滤不是一个好主意.请参阅此处的链接:https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe

It's not a good idea to use a pipe for filtering. See the link here: https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe

相反，在您的组件中添加代码以执行您的过滤.然后在过滤后的数据上使用 ngFor.

Rather, add code in your component to perform your filtering. Then use your ngFor over the filtered data.

下面是一个例子.那么你可以在这个例子中对过滤的产品使用 ngFor.

Below is an example. Then you would just use ngFor over the filteredProducts in this example.

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

这篇关于使用 *ngFor 迭代数组，同时过滤某个属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！