Angular中Observable数据赋值Hero Interface实例失败，求排查

我来帮你拆解下代码失效的原因，以及对应的修复方案：

核心问题点 #

• 数据类型不匹配：你的API返回的是包含120条数据的JSON数组，但你在订阅时把data声明为单个Hero对象。数组本身没有name这类属性，所以currentHero.name自然会返回undefined。
• 属性名不一致：API返回的字段是primary_attr，但你的Hero接口定义的是primary_attribute，直接映射会导致这个属性无法正确赋值。
• 存储变量类型错误：你用currentHero（单个对象）来存储多条英雄数据，这显然不符合需求，应该用数组类型Hero[]。

修复步骤 #

1. 修正组件内的变量类型 #

首先把存储英雄数据的变量改成数组类型：

currentHeroes: Hero[] = []; // 用数组存储所有英雄数据

2. 调整HTTP服务的返回类型（可选但推荐） #

如果你的httpService.getHeroes()还没正确声明返回类型，先在服务里修正：

// 在你的HttpService类中
getHeroes(): Observable<Hero[]> {
  return this.http.get<Hero[]>('你的API接口地址');
}

3. 正确映射数组数据并处理属性名 #

在订阅时，需要遍历返回的数组，把每个元素转换成符合Hero接口的对象，重点处理primary_attr到primary_attribute的映射：

showHeroes() {
  this.httpService.getHeroes()
    .subscribe((data: any[]) => {
      this.currentHeroes = data.map(heroItem => ({
        attack_type: heroItem.attack_type,
        id: heroItem.id,
        legs: heroItem.legs,
        localized_name: heroItem.localized_name,
        name: heroItem.name,
        primary_attribute: heroItem.primary_attr, // 转换属性名
        roles: heroItem.roles
      } as Hero));
    });
}

或者用更优雅的管道操作符提前处理数据：

showHeroes() {
  this.httpService.getHeroes()
    .pipe(
      map((data: any[]) => data.map(heroItem => ({
        ...heroItem, // 展开所有匹配的属性
        primary_attribute: heroItem.primary_attr // 替换不匹配的属性名
      } as Hero)))
    )
    .subscribe(heroes => {
      this.currentHeroes = heroes;
      // 现在可以正常访问英雄属性了
      console.log(this.currentHeroes[0].name);
    });
}

为什么之前的代码会失效？ #

你之前的代码把整个数组当成了单个Hero对象，所以当你访问data.name时，实际上是在访问数组的name属性（数组本身没有这个属性），自然返回undefined。加上属性名不匹配的问题，即使是单个对象也会导致primary_attribute无法正确赋值。

内容的提问来源于stack exchange，提问作者Christoffer Ashorn