Angular - 如何将 ngFor 过滤到特定的对象属性数据

Posted 2023-03-13

【中文标题】Angular - 如何将 ngFor 过滤到特定的对象属性数据

【英文标题】：Angular - How to filter ngFor to specific object property data

【发布时间】：2018-11-08 13:21:37

【问题描述】：

我在 in-memory-data.service.ts 中有这些数据：

import InMemoryDbService from 'angular-in-memory-web-api';
export class InMemoryDataService implements InMemoryDbService 
createDb() 
const values = [
  
    id: 0,
    title: 'Calculus',
    author: 'John Doe',
    date: '2018-05-15',
    content: 'Random text',
    category: 'Science'
  ,
  
    id: 1,
    title: 'Bulbasaur',
    author: 'John Doe',
    date: '2000-09-14',
    content: 'Random text',
    category: 'TV shows'
  ,
  
    id: 2,
    title: 'Fourier Analysis',
    author: 'John Doe',
    date: '2014-01-01',
    content: 'Random text',
    category: 'Science'
  
];

return values;
  

目前我正在我的一个组件中显示数据：

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

如何仅显示类别“科学”值？

【参考方案1】：

您可以使用 java 脚本的 filter 将其过滤掉，该脚本返回包含您所需数据的新数组，如下所示：

this.filteredvalues = values.filter(t=>t.category ==='Science');

然后你可以遍历这个过滤后的数组

<li *ngFor="let value of filteredvalues ">value.title</li>

【讨论】：

我的回答有什么不同吗？

@Sajeetharan，是的，您使用 let 将 filteredvalues 绑定到本地范围，这是查看/模板部分无法访问的。无论如何，我们使用相同的方法同时写了答案

好的，知道了！但这只是一个样本！感谢您的反馈

是的，我知道，已经告诉过你这只是一个巧合，我们发布了几乎更模糊的答案概念。

【参考方案2】：

您可以使用array.filter过滤匹配值

const values = [
  
    id: 0,
    title: 'Calculus',
    author: 'John Doe',
    date: '2018-05-15',
    content: 'Random text',
    category: 'Science'
  ,
  
    id: 1,
    title: 'Bulbasaur',
    author: 'John Doe',
    date: '2000-09-14',
    content: 'Random text',
    category: 'TV shows'
  ,
  
    id: 2,
    title: 'Fourier Analysis',
    author: 'John Doe',
    date: '2014-01-01',
    content: 'Random text',
    category: 'Science'
  
];

let filteredvalues = values.filter(t=>t.category ==='Science');
console.log(filteredvalues);

所以匹配的 html 应该是，

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

【参考方案3】：

如果您希望过滤器逻辑可重复使用，您也可以将其隔离。 您可以使用所需的过滤条件创建自定义管道。 然后将模板中的管道用作

<li *ngFor="let value of values | customFilter:filtercond">

您可以根据您的要求在组件中定义 filtercond

filtercond = category: 'Science';

类似问题在这里解决：apply filters to *ngFor