Angular: HttpClient Service и наблюдаемый пользовательский тип

Question

Моя getHeroes функция должна возвращать Hero[] Объекты, но я не могу получить доступ к ее методам. Я что-то не так делаю?

hero.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
    });
}

Я получаю ERROR TypeError: hero.getName is not a function на последней строке.

Вот живая версия Живая ссылка

Answer 1

Http-вызов возвращает объект (на самом деле просто строку JSON, которая позже будет проанализирована HttpClient) с идентификатором и именем и без функции. Вы можете проверить это на своей вкладке сети.

Что вы можете сделать, это просто использовать конструктор:

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

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

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

И позже сопоставьте ответ от http-вызова с нужным вам объектом:

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