Angular无法使用API响应数据，接口与数据嵌套问题求助

我是Angular新手，正在完成课程项目，目前已接近收尾，但遇到了瓶颈。应用需要实现以下功能：

• 加载世界地图SVG图片及显示国家数据的侧边栏（功能正常）；
• 为SVG路径添加点击事件监听器（功能正常）；
• 点击SVG路径时，监听器获取国家代码并调用geonames API（功能正常）；
• API返回的国家信息/统计数据更新页面文本字段（功能异常）。

所有步骤都能正常执行，但到使用API数据显示国家统计信息时，无法通过接口访问响应数据。参考的Pluralsight课程可能有些过时。

相关代码 #

app-component.ts #

import { Component } from '@angular/core';
import { WorldService } from "./world/world.service";
import { IWorld } from "./world/country";
import { map } from "rxjs";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'wgu-map';
  countries: Array<IWorld> = [];

  constructor(public worldService: WorldService) {}

  addListeners() {
    const paths = document.querySelectorAll("path, g");
    for(let i = 0; i < paths.length; i++){
      if(paths[i].id){
        paths[i].addEventListener("click", (e: Event) => this.worldService.getCountryInfo(paths[i].id)
          .subscribe((response: IWorld[]) => {
            console.log("API response: ", response);
            this.countries = response;
          })
        )
      }
    }
  }

  ngOnInit(){
    this.addListeners();
  };
}

app-component.html（模板） #

<div>
        <h1 id="title">Country Info</h1>
        <div class="country-info" style="margin-left: 10px">

           <!-- 此处报错 -->
           <!-- 尝试从本地变量访问API数据 -->
           <!-- {{countries.countryName}} 抛出错误 - Property 'countryName' does not exist on type 'IWorld[]'. -->

          <p>Country Name: <span>{{ countries.countryName }}</span></p>
          <p>Country Capital: <span></span></p>
          <p>Country Region: <span></span></p>
          <p>Income Level: <span></span></p>
          <p>Population: <span></span></p>
          <p>Continent: <span></span></p>
        </div>
      </div>

world-service.ts（处理API调用） #

import {Injectable} from "@angular/core";
import {HttpClient, HttpErrorResponse} from "@angular/common/http";
import {catchError, map, Observable, tap, throwError} from "rxjs";
import {IWorld} from "./country";

@Injectable({
  providedIn: 'root',
})
export class WorldService{
  public url = "";
  public suffix = "";

  constructor(private http: HttpClient) {}

  getCountryInfo( info:string ): Observable<IWorld[]> {
    this.url = `http://api.geonames.org/countryInfo?country=${this.getCountryCode(info)}&username=brentmercer&type=json`;
    console.log("API call to: " + this.url);
    return this.callApi(this.url);
  }

  getCountryCode(countryCode:string){
    return this.suffix = countryCode;
  };

  callApi(url:string){
    return this.http.get<IWorld[]>(url)
      .pipe(
        tap(data => console.log("All: ", JSON.stringify(data))),
        catchError(this.handleError),
        map(responseData => {
          console.log("Response data: ", responseData);
          const detailArray = [];
          for (const key in responseData) {
            if (responseData.hasOwnProperty(key)) detailArray.push(responseData[key]);
          }
          console.log("Detailed arrays: ", detailArray);
          return detailArray;
        })
      )
  }
  private handleError(err: HttpErrorResponse){
    let errorMessage = '';
    if(err.error instanceof ErrorEvent){
      errorMessage = `An error occurred: ${err.error.message}`;
    } else {
      errorMessage = `Server returned code: ${err.status}, error message is ${err.message}`
    }
    console.log(errorMessage)
    return throwError(() => errorMessage);
  }
}

country.ts（接口） #

export interface IWorld{
  "continent": string;
  "capital": string;
  "languages": string;
  "geonameId": string;
  "south": string;
  "isoAlpha3": string;
  "north": string;
  "fipsCode": string;
  "population": string;
  "east": string;
  "isoNumeric": string;
  "areaInSqKm": string;
  "countryCode": string;
  "west": string;
  "countryName": string;
  "postalCodeFormat": string;
  "continentName": string;
  "currencyCode": string;
  "cIncome": string;
}

API返回结构说明 #

原始API返回 #

{
  geonames: [
    {
      continent: "NA",
      capital: "Washington",
      languages: "en-US,es-US,haw,fr",
      // ...其他字段
    }
  ]
}

经过服务map处理后的结构（异常） #

[
  [
    {
      continent: "NA",
      capital: "Washington",
      // ...其他字段
    }
  ]
]

问题分析与解决方案 #

核心问题 #

1. API响应解析错误：服务中callApi方法的map处理逻辑错误。API返回的是包含geonames数组的对象，但当前代码遍历对象的所有属性并将其push到数组中，导致返回数组套数组的结构。
2. 模板数据绑定错误：组件中countries是数组类型，但模板直接尝试访问countries.countryName，数组不存在该属性，因此报错。

修复步骤 #

1. 修正服务中的API响应解析

首先，为API的外层返回结构定义一个接口：

// 在world-service.ts中添加
interface GeonamesResponse {
  geonames: IWorld[];
}

然后修改callApi方法，正确提取geonames数组：

callApi(url:string): Observable<IWorld[]> {
  return this.http.get<GeonamesResponse>(url)
    .pipe(
      tap(data => console.log("All: ", JSON.stringify(data))),
      catchError(this.handleError),
      map(responseData => {
        // 直接返回geonames数组，无需遍历对象属性
        console.log("Parsed data: ", responseData.geonames);
        return responseData.geonames;
      })
    )
}

2. 调整组件与模板的数据绑定

因为每次点击单个国家，API返回的geonames数组中只有一个元素，所以可以将组件中的countries改为单个IWorld对象（更符合业务逻辑）：

app-component.ts修改：

export class AppComponent {
  title = 'wgu-map';
  // 将数组改为单个对象，初始化为null或undefined
  currentCountry: IWorld | null = null;

  constructor(public worldService: WorldService) {}

  addListeners() {
    const paths = document.querySelectorAll("path, g");
    for(let i = 0; i < paths.length; i++){
      if(paths[i].id){
        paths[i].addEventListener("click", (e: Event) => this.worldService.getCountryInfo(paths[i].id)
          .subscribe((response: IWorld[]) => {
            console.log("API response: ", response);
            // 取数组第一个元素赋值给currentCountry
            this.currentCountry = response[0];
          })
        )
      }
    }
  }

  ngOnInit(){
    this.addListeners();
  };
}

app-component.html修改（使用可选链?.避免空值报错）：

<div>
  <h1 id="title">Country Info</h1>
  <div class="country-info" style="margin-left: 10px">
    <p>Country Name: <span>{{ currentCountry?.countryName }}</span></p>
    <p>Country Capital: <span>{{ currentCountry?.capital }}</span></p>
    <p>Country Region: <span>{{ currentCountry?.continentName }}</span></p>
    <p>Income Level: <span>{{ currentCountry?.cIncome }}</span></p>
    <p>Population: <span>{{ currentCountry?.population }}</span></p>
    <p>Continent: <span>{{ currentCountry?.continentName }}</span></p>
  </div>
</div>

额外优化建议 #

• 避免直接操作DOM添加事件监听器，建议使用Angular的@HostListener或者在SVG元素上绑定(click)事件，更符合Angular的最佳实践。
• 订阅Observable时记得在组件销毁时取消订阅，避免内存泄漏，可以使用async管道自动管理订阅：

例如，组件中定义currentCountry$: Observable<IWorld | null>，然后在模板中使用{{ (currentCountry$ | async)?.countryName }}，这样无需手动订阅和取消订阅。

内容的提问来源于stack exchange，提问作者Brent Mercer