我有一个在两个不同页面(即父级和子级)上使用相同服务数据的应用程序。
在其中一页上,我尝试使用ngx-filter-pipe
module过滤数据以返回基于列的唯一数组,但是数据仍然返回所有值。
如何返回不同的值?
我的代码:
.module.ts-
import { NgModule } from '@angular/core';
import { NgPipesModule } from 'ngx-pipes';
@NgModule({
imports: [
NgPipesModule
]
})
...
.component.html-
<div padding=true>
<ul>
<li *ngFor="let group of musicList| unique: PLAYLIST_GROUP"></li>
</ul>
</div>
服务中的数据-
[
{
"KEYS": 1,
"ARTIST": "Jamila Woods",
"TITLE": "LSD",
"ALBUM": "HEAVN",
"PLAYLIST_GROUP": "RnB/Soul",
"COUNT": 3
},
{
"KEYS": 2,
"ARTIST": "Travis Scott",
"TITLE": "SICKO MODE",
"ALBUM": "ASTROWORLD",
"PLAYLIST_GROUP": "Hip Hop",
"COUNT": 1
},
{
"KEYS": 3,
"ARTIST": "Rihanna",
"TITLE": "ANTI",
"ALBUM": "Yeah, I Said it",
"PLAYLIST_GROUP": "RnB/Soul",
"COUNT": 3
},
{
"KEYS": 4,
"ARTIST": "Summer Walker",
"TITLE": "Girls Need Love",
"ALBUM": "Last Day of Summer",
"PLAYLIST_GROUP": "RnB/Soul",
"COUNT": 3
}
]
答案 0 :(得分:1)
尝试将属性名称放在单引号内。
答案 1 :(得分:1)
根据unique的文档。该选项需要另一组引号。
用法:数组|唯一的:“属性(可选)”
<div padding=true>
<ul>
<li *ngFor="let group of musicList| unique: 'PLAYLIST_GROUP'"></li> <!--Quotes-->
</ul>
</div>
答案 2 :(得分:0)
尝试一下
<li *ngFor="let group of musicList | unique: 'group.PLAYLIST_GROUP' "></li>
或者,
<li *ngFor="let group of (musicList | unique: 'group.PLAYLIST_GROUP') "></li>
参考, 如下文档中 https://angular.io/guide/pipes