试图从角度数组中获取唯一的对象列表

Question

从我的 service.ts 返回一个 observable，如下所示：

import { Injectable, ErrorHandler } from '@angular/core';
import { HttpClient, HttpErrorResponse, HttpHeaders } from 
'@angular/common/http'
import { Observable } from 'rxjs';
import { catchError, tap } from 'rxjs/operators';
import { PokeResponse } from '../PokeResponse';

@Injectable({
  providedIn: 'root'
  })
export class PokeApiService {

private url = "https://pokemon-go1.p.rapidapi.com/pokemon_stats.json";

constructor(private http:HttpClient) { }

getPokeData(): Observable<PokeResponse> {
  return this.http.get<PokeResponse>(this.url, 
  {
    headers : new HttpHeaders({
      'x-rapidapi-key': 'a6cef4cbcamsh05b29346394d4a4p1bafacjsn2a92406ac103'
    })
  })
.pipe(
  tap(data => console.log('Pokedata/Error' + JSON.stringify(data))
  ),
  catchError(this.handleError)
);
}

private handleError(err:HttpErrorResponse) {
console.log('PokemonService: ' + err.message);
return Observable.throw(err.message);
}
}

这是我的回应：

export interface PokeResponse{
list:results[];

results:{
    pokemon_id:number;
    pokemon_name:string;
    base_attack:number;
    base_defense:number;
    base_stamina:number;
}[];
}
export interface results{
    pokemon_id:number;
    pokemon_name:string;
    base_attack:number;
    base_defense:number;
    base_stamina:number;
}

export class Pokemon implements results{

    pokemon_id:number;
    pokemon_name:string;
    base_attack:number;
    base_defense:number;
    base_stamina:number;

constructor(_id:number, _name:string, _atk:number, _def:number, _stam:number) {

    _id = this.pokemon_id;
    _name = this.pokemon_name;
    _atk = this.base_attack;
    _def = this.base_defense;
    _stam = this.base_stamina;
}
}

这是我的 component.ts：

import { Component, OnInit } from '@angular/core';
import { PokeApiService } from 'src/app/services/poke-api.service';
import { PokeResponse, results, Pokemon } from 'src/app/PokeResponse';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-list-pokemon',
  templateUrl: './list-pokemon.component.html',
  styleUrls: ['./list-pokemon.component.css']
})
export class ListPokemonComponent implements OnInit {

  constructor(private pokeService: PokeApiService) { }

  ngOnInit(): void {
    this.getPokeDetails();
  }

  pokeData:PokeResponse;
  errorMessage:any;

 pokeArray:results;

  getPokeDetails() : boolean {
    this.pokeService.getPokeData().subscribe(
      pokeData => {
        this.pokeData=pokeData;
        console.table(pokeData);
      },
       error => this.errorMessage = <any>error
    );
    return false;
  }
}

在我的控制台中，我返回了我的 observable 的 console.table，例如 this

我正在尝试过滤掉与其他口袋妖怪名称相同的口袋妖怪，这也可以通过过滤掉任何 pokemon_ids 来实现，因为无论类型如何，所有统计信息都匹配。

到目前为止我已经尝试过：

console.log(this.pokeArray);,

使用[...Set()]、forEach() 和Array.from()

任何关于如何使这个问题更清楚的帮助或建议将不胜感激。

Answer 1

试试这个，使用过滤器：

// list-pokemon.component.ts
export class ListPokemonComponent implements OnInit {
  uniqueListPoke = [];
  flags = {};

  constructor(private pokeService: PokeApiService) { }

  ngOnInit(): void {
    this.getPokeDetails();
  }

  pokeData:PokeResponse;
  errorMessage:any;

 pokeArray:results;

  getPokeDetails() : boolean {
    this.pokeService.getPokeData().subscribe(
      pokeData => {
        this.uniqueListPoke = pokeData.filter((entry) => {
            if (this.flags[entry.pokemon_name]) {
              // console.log('flags', false);
                return false;
            }
            this.flags[entry.pokemon_name] = true;
            return true;
        });
        console.log(JSON.stringify(this.uniqueListPoke));
      },
       error => this.errorMessage = <any>error
    );
    return false;
  }
}

工作示例： https://stackblitz.com/edit/angular-distinct-poke?file=src/app/hello.component.ts