使用* 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?

我之所以对这种构造特别感兴趣，是因为我只想返回"completed"为"false"的第一个值，而我可以使用"let i = index"来处理在这种情况下，* ngFor块.但是我不想返回所有标志对象中的第一个，只是返回将"completed"属性设置为"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#附录无过滤器或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.

下面是一个示例.然后，在此示例中，只对filteredProducts使用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屋！