Angular的管道过滤器不返回不同的值答案

【问题标题】：Angular's pipe filter not returning distinct valuesAngular的管道过滤器不返回不同的值
【发布时间】：2019-04-04 12:22:25
【问题描述】：

我有一个应用程序在两个不同的页面（即父页面和子页面）上使用相同的服务数据。

在其中一个页面上，我正在尝试过滤数据以基于使用 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
 }
]

【问题讨论】：

你有没有试过<li *ngFor="let group of musicList| unique: group.PLAYLIST_GROUP"></li>不确定，但让我们试一试
不返回任何物品 :( @KenanaReda

标签： angular typescript filtering httpmodule pipes-filters

【解决方案1】：

根据unique 的文档。该选项需要另一组引号。

用法：数组 | unique: '属性（可选）'

<div padding=true>
  <ul>
    <li *ngFor="let group of musicList| unique: 'PLAYLIST_GROUP'"></li> <!--Quotes-->
  </ul>
</div>

【讨论】：

【解决方案2】：

尝试将属性名称放在单引号内。

【讨论】：

本例中的正确代码：

这正是我所缺少的！