Angular - 如何筛选ngFor指定属性的数据

Question

我有这个数据在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>

如何仅显示分类为“Science”的值？

- Ventura8

Answer 1

您可以使用 JavaScript 的 filter 进行筛选，它将返回一个包含所需数据的新数组，例如：

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

然后您可以迭代这个过滤后的数组。

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

- Pardeep Jain

---

有什么不同的答案吗？ - Sajeetharan

@Sajeetharan，是的，你可以使用let将filteredvalues绑定到本地作用域中，但是它对于视图/模板部分是不可访问的。无论如何，我们同时使用相同的方法编写了答案。 - Pardeep Jain

好的，我明白了！但那只是一个示例！感谢您的反馈。 - Sajeetharan

是的，我知道，我已经告诉过你了，我们几乎同时发布了类似的答案，这只是巧合。 - Pardeep Jain

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

- Sajeetharan

Answer 3

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

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

您可以根据需要在组件中定义filtercond过滤器条件。

filtercond = {category: 'Science'};

类似的问题在这里得到了解决：如何对*ngFor应用过滤器

- Avinash