Angular技术问题：如何通过ngFor筛选特定对象属性的数据

嘿，我来帮你搞定这个需求！要只展示category为'Science'的条目，有两种实用的方法，你可以根据场景选择：

方法1：在组件类中预处理数据（推荐） #

这种方式更高效，尤其是数据量较大的时候——它只会在数据更新时处理一次，而不是每次模板变更检测都重新计算过滤逻辑。

操作步骤：

• 在你的组件类里新增一个属性，用来存储过滤后的结果，比如scienceValues：

// 替换成你实际的组件类代码
export class YourComponent {
  values: any[]; // 从InMemoryDataService获取的原始数据
  scienceValues: any[];

  constructor(private dataService: InMemoryDataService) {}

  ngOnInit() {
    // 先获取原始数据（这里假设你已经有获取数据的逻辑）
    this.values = this.dataService.getValues(); // 替换成你实际获取数据的方法
    // 过滤出category为"Science"的数据
    this.scienceValues = this.values.filter(item => item.category === 'Science');
  }
}

• 接着在模板里遍历这个预处理好的数组：

<ol class="list-unstyled mb-0">
  <li *ngFor="let value of scienceValues">{{value.title}}</li>
</ol>

方法2：使用自定义管道在模板中过滤 #

如果你更倾向于在模板里直接处理数据，可以自定义一个过滤管道。不过要注意：这种方式在数据量大时可能影响性能，因为每次模板变更检测都会执行过滤逻辑。

操作步骤：

• 首先创建一个自定义管道：

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

@Pipe({
  name: 'filterByCategory'
})
export class FilterByCategoryPipe implements PipeTransform {
  transform(items: any[], targetCategory: string): any[] {
    // 处理空值情况，避免报错
    if (!items || !targetCategory) {
      return items;
    }
    // 过滤出匹配目标分类的条目
    return items.filter(item => item.category === targetCategory);
  }
}

• 别忘了在你的模块里声明并导出这个管道（如果要在其他组件复用的话）：

import { NgModule } from '@angular/core';
import { FilterByCategoryPipe } from './filter-by-category.pipe';

@NgModule({
  declarations: [FilterByCategoryPipe],
  exports: [FilterByCategoryPipe]
})
export class YourModule {}

• 最后在模板里使用这个管道：

<ol class="list-unstyled mb-0">
  <li *ngFor="let value of values | filterByCategory: 'Science'">{{value.title}}</li>
</ol>

内容的提问来源于stack exchange，提问作者Ventura8