Verwenden von * ngFor, um über ein Array zu iterieren und gleichzeitig nach einer bestimmten Eigenschaft zu filtern

Question

In meiner Angular 2-Anwendung frage ich mich, ob es eine Möglichkeit gibt, über ein Array zu iterieren und gleichzeitig eine bestimmte Eigenschaft im Block *ngFor zu filtern. So würde die Syntax wie folgt aussehen:

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

Also im Grunde die Logik ist, für jedes Objekt („Flag“ ist ein Objekt) in dem Array, das vorhanden ist, wo die „abgeschlossen“ Eigenschaft auf „false ", gib diesen Wert zurück. Anstatt zuerst über das Array zu iterieren und dann mit * ngIf weiter zu filtern, wäre es nett (und sehr hilfreich in meiner speziellen Situation), wenn ich beides im Block * ngFor machen könnte. Möglich?

Der Grund, warum ich mich für diese Art der Konstruktion interessiert, ist, weil ich nur den ersten der Werte, wo "abgeschlossen" ist "falsch", und ich könnte damit umgehen mit "let i = index" im Block * ngFor in diesem Fall. Aber ich möchte nicht das erste aller Flag-Objekte zurückgeben, sondern nur die Flag-Objekte, bei denen die Eigenschaft "completed" auf "false" gesetzt ist.

Answer 1

Es ist keine gute Idee, ein Rohr zum Filtern verwendet werden. Siehe den Link hier: https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe

Fügen Sie Code in Ihrer Komponente hinzu, um Ihre Filterung durchzuführen. Verwenden Sie dann Ihre ngFor über die gefilterten Daten.

Unten ist ein Beispiel. Dann würden Sie einfach ngFor über die filteredProducts in diesem Beispiel verwenden.

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

Sie können eine custom pipe erstellen, um die Elemente zu filtern, wenn Sie über eine for-Schleife schleifen.

import { Pipe, PipeTransform } from '@angular/core'; 

@Pipe({name: 'notCompleted'}) 
export class notCompletedPipe implements PipeTransform { 
    transform(value: string]): string { 
    return value != 'completed'; 
    } 
} 

und Verwenden Sie es in HTML wie diese,

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