typescript - Angular: HttpClient-tjänst och Observable-anpassad typ

Min getHeroes-funktion ska returnera Hero[]-objekt, men jag kan inte komma åt dess metoder. Gör jag något fel?

hjälte.ts

export class Hero {
  id: number;
  name: string;

  getName(): string {
    return this.name;
  }
}

heroes.service.ts

getHeroes (): Observable<Hero[]> {
    return this.http.get<Hero[]>(this.heroesUrl)
      .pipe(
        catchError(this.handleError('getHeroes', []))
      );
  }

heroes.component.ts

getHeroes(): void {
  this.heroesService.getHeroes()
    .subscribe(heroes => {
      this.heroes = heroes;
      this.heroes.forEach((hero) => console.log(hero));
      this.heroes.forEach((hero) => console.log(hero.getName())); //ERROR here
    });
}

Jag får ett ERROR TypeError: hero.getName is not a function på sista raden.

Här är en liveversion Live-länk

Svar #1

HTTP-anropet returnerar ett objekt (egentligen bara en JSON-sträng som senare kommer att parsigas av HttpClient) med id och namn och ingen funktion. Du kan kolla det i din nätverksflik.

Vad du skulle kunna göra är helt enkelt att använda en konstruktor:

export class Hero {
  id: number;
  name: string;

  getName(): string {
    return this.name;
  }

  contructor(id, name) {
    this.id = id;
    this.name = name;
   }
}

Och mappa senare svaret från HTTP-anropet till objektet du behöver:

getHeroes (): Observable<Hero[]> {
    return this.http.get<Hero[]>(this.heroesUrl)
      .pipe(
        map(hero => new Hero(hero.id, hero.name),
        catchError(this.handleError('getHeroes', []))
      );
  }