Angular-如何将ngFor过滤到特定的对象属性数据 [英] Angular - How to filter ngFor to specific object property data
本文介绍了Angular-如何将ngFor过滤到特定的对象属性数据的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在in-memory-data.service.ts中有此数据:
I have this data in 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};
}
}
当前,我正在其中一个组件中显示数据:
Currently I am displaying the data in one of my components:
<ol class="list-unstyled mb-0">
<li *ngFor="let value of values">{{value.title}}</li>
</ol>
如何仅显示科学"类别的值?
How can I display only category "Science" values?
推荐答案
您可以使用Java脚本的 filter
将其过滤掉,该脚本将返回包含所需数据的新数组,如下所示:
You can filter it out using filter
of java script which return new array containing your required data , like this :
this.filteredvalues = values.filter(t=>t.category ==='Science');
然后您可以遍历此过滤后的数组
and then you can iterate over this filtered array
<li *ngFor="let value of filteredvalues ">{{value.title}}</li>
这篇关于Angular-如何将ngFor过滤到特定的对象属性数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文