试图从angular的数组中获取一个唯一的对象列表。

Question

我的service.ts返回了一个可观察的东西，如图所示。

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;
  }
}

在我的控制台中，我得到了我的观测值的控制台表，就像这样： 这个

我试图过滤掉与其他口袋妖怪相同的名字，这也可以通过直接过滤掉任何一个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.comeditangular-distinct-poke?file=srcapphello.component.ts。