我有一个角度应用程序,它有一个从假API获取数据的服务,它返回一个对象数组,如下所示:

[
  {
    "userId": 1,
    "id": 1,
    "title": "quidem molestiae enim"
  },
  {
    "userId": 1,
    "id": 2,
    "title": "sunt qui excepturi placeat culpa"
  },
  {
    "userId": 2,
    "id": 3,
    "title": "omnis laborum odio"
  },
  {
    "userId": 2,
    "id": 4,
    "title": "non esse culpa molestiae omnis sed optio"
  },
  {
    "userId": 3,
    "id": 5,
    "title": "eaque aut omnis a"
  },
  {
    "userId": 4,
    "id": 6,
    "title": "natus impedit quibusdam illo est"
  },
  ]

我想得到的是不重复的userId属性的唯一值,所以我应该得到这些值:




那么如何在Angular4中实现这一点。。
这是我的代码:
1-Service.ts:返回所有数据而不过滤重复值。
import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http'
import { Observable } from 'rxjs/Observable';
import { map } from 'rxjs/operators';
import 'rxjs/add/operator/map'
import "rxjs/Rx";



@Injectable()
export class AlbumsService {


  constructor(private _http:HttpClient) { }
  serveLink:string = "https://jsonplaceholder.typicode.com/albums"

  getUniqueUserIDs():Observable<IAlbums[]>
  {
    return this._http.get<IAlbums[]>(this.serveLink).map(response=>response)
  }

}

2-FilterComponent.ts:这里我通过订阅observate将结果记录在控制台中。
import { Component, OnInit } from '@angular/core';
import { AlbumsService } from '../albums.service';


@Component({
  selector: 'app-filter-albums-by-user-id',
  templateUrl: './filter-albums-by-user-id.component.html',
  styleUrls: ['./filter-albums-by-user-id.component.css']
})
export class FilterAlbumsByUserIdComponent implements OnInit {

  constructor(private _albumsService:AlbumsService) { }

  ngOnInit()
  {

    this._albumsService.getUserIDs()
    .subscribe
     ((response)=>
      {
        console.log(response)
      }
    )

  }
}

另一个重要的问题,在这种情况下,我应该在哪里写逻辑?
在服务方法中还是在组件的订阅中?
谢谢您。

最佳答案

通过ES6使用新集合,

const response = [
  {
    "userId": 1,
    "id": 1,
    "title": "quidem molestiae enim"
  },
  {
    "userId": 1,
    "id": 2,
    "title": "sunt qui excepturi placeat culpa"
  },
  {
    "userId": 2,
    "id": 3,
    "title": "omnis laborum odio"
  },
  {
    "userId": 2,
    "id": 4,
    "title": "non esse culpa molestiae omnis sed optio"
  },
  {
    "userId": 3,
    "id": 5,
    "title": "eaque aut omnis a"
  },
  {
    "userId": 4,
    "id": 6,
    "title": "natus impedit quibusdam illo est"
  },
  ];

const uniqueIds = [...new Set( response.map(obj => obj.userId)) ];
console.log(uniqueIds);

您应该在组件级别执行此操作。

关于javascript - 如何获取Observable Array属性的唯一值-Angular,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/50216685/

10-12 00:14
查看更多