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>

我如何只显示类别＆＃34;科学＆＃34;值？

Answer 1

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

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

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

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

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>

Answer 3

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

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

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

filtercond = {category: 'Science'};

此处解决了类似问题：apply filters to *ngFor

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

3 个答案: