Трубный фильтр Angular не возвращает разные значения

Question

У меня есть приложение, которое использует одни и те же служебные данные на двух разных страницах, т.е. «Родитель» и «Ребенок».

На одной из страниц я пытаюсь отфильтровать данные, чтобы получить уникальный массив на основе столбца, используя 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
 }
]

Answer 1

Согласно документации для уникально . Опция требует другого набора цитат.

Использование: массив | уникальный: 'Свойство (необязательно)'

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

Answer 2

Попробуйте, поместив имя свойства в одинарные кавычки.

Answer 3

Попробуйте это,

<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

https://www.npmjs.com/package/ngx-pipes#unique