使用 Angular 和 World Bank API 通过国家名称获取国家信息

[
  { "name": "United States", "iso2Code": "US" },
  { "name": "Canada", "iso2Code": "CA" },
  { "name": "France", "iso2Code": "FR" },
  { "name": "Germany", "iso2Code": "DE" },
  { "name": "United Kingdom", "iso2Code": "GB" }
  // ... 更多国家
]

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class WorldbankService {
  private apiUrl = 'http://api.worldbank.org/v2/country';
  private countryCodes: any[] = [];

  constructor(private http: HttpClient) {
    this.loadCountryCodes();
  }

  private loadCountryCodes() {
    this.http.get<any[]>('assets/country-codes.json').subscribe(data => {
      this.countryCodes = data;
    });
  }

  getCountryProperties(countryName: string): Observable<any> {
    const iso2Code = this.getIso2Code(countryName);
    if (iso2Code) {
      const url = `${this.apiUrl}/${iso2Code}?format=json`;
      return this.http.get(url).pipe(
        map((data: any) => data[1][0]),
        catchError(this.handleError<any>('getCountryProperties'))
      );
    } else {
      console.error(`ISO 2 code not found for country: ${countryName}`);
      return of(null); // 返回一个空的 Observable
    }
  }

  private getIso2Code(countryName: string): string | undefined {
    const country = this.countryCodes.find(c => c.name.toLowerCase() === countryName.toLowerCase());
    return country ? country.iso2Code : undefined;
  }

    /**
   * Handle Http operation that failed.
   * Let the app continue.
   * @param operation - name of the operation that failed
   * @param result - optional value to return as the observable result
   */
  private handleError<T>(operation = 'operation', result?: T) {
    return (error: any): Observable<T> => {

      // TODO: send the error to remote logging infrastructure
      console.error(error); // log to console instead

      // TODO: better job of transforming error for user consumption
      console.log(`${operation} failed: ${error.message}`);

      // Let the app keep running by returning an empty result.
      return of(result as T);
    };
  }
}

import { Component } from '@angular/core';
import { WorldbankService } from '../worldbank.service';

@Component({
  selector: 'app-country-info',
  templateUrl: './country-info.component.html',
  styleUrls: ['./country-info.component.css']
})
export class CountryInfoComponent {
  countryName = "";
  countryProperties: any = null;

  constructor(private worldbankService: WorldbankService) {}

  getCountryProperties() {
    this.worldbankService.getCountryProperties(this.countryName).subscribe(
      (data: any) => {
        this.countryProperties = data;
      },
      (error) => {
        console.error('Error fetching country properties:', error);
        this.countryProperties = null; // 清空数据，显示错误信息
      }
    );
  }
}

<div class="right-column">
    <input type="text" [(ngModel)]="countryName" placeholder="Enter a country name" />
    <button (click)="getCountryProperties()">Enter</button>

    <div *ngIf="!countryProperties && countryName">
        <p>Could not find country "{{ countryName }}". Please check the spelling or try another country.</p>
    </div>

    <ul class="properties-list" *ngIf="countryProperties">
        <li>Name: {{ countryProperties.name }}</li>
        <li>Capital: {{ countryProperties.capitalCity }}</li>
        <li>Region: {{ countryProperties.region.value }}</li>
        <li>Income Level: {{ countryProperties.incomeLevel.value }}</li>
        <li>Latitude: {{ countryProperties.latitude }}</li>
        <li>Longitude: {{ countryProperties.longitude }}</li>
    </ul>
</div>