使用 *ngFor 迭代数组，同时过滤某个属性 [重复]

Posted 2023-03-13

【中文标题】使用 *ngFor 迭代数组，同时过滤某个属性 [重复]

【英文标题】：Using *ngFor to iterate over an array while also filtering on a certain property [duplicate]

【发布时间】：2018-01-08 15:26:57

【问题描述】：

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

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

所以基本上逻辑是，对于存在的数组中的每个对象（“标志”是一个对象），其中“完成”属性设置为“假”，返回该值。与其先遍历数组，然后使用 *ngIf 进一步过滤，不如在 *ngFor 块中同时执行这两项操作会很好（并且在我的特定情况下非常有帮助）。可能吗？

我之所以对这种构造特别感兴趣，是因为我只想返回“完成”为“假”的值中的第一个，我可以用“让 i = 索引”来处理在这种情况下， *ngFor 块。但我不想返回所有标志对象中的第一个，只返回“完成”属性设置为“假”的标志对象。

【问题讨论】：

您可以实现 PipeTransform 并在 ng-if 中将其用作过滤器angular.io/guide/pipes

如@Jocket 所指出的，在此处使用管道查看此链接以获取类似的实现，此处输入来自用户link。有关管道的更多信息，请查看link

谢谢，这可能很有效。

【参考方案1】：

你可以创建一个custom pipe 来在你循环一个for循环时过滤项目。

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

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

并像这样在 html 中使用它，

<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>

【参考方案2】：

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

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

下面是一个例子。然后，在本例中，您将只使用 ngFor 而非过滤的产品。

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