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。

这是实时版本Live link

Answer 1

Http调用返回一个具有id和name且没有功能的对象（实际上只是一个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', []))
      );
  }

Angular：HttpClient服务和可观察的自定义类型

1 个答案: