我已经创建了一个Angular应用程序，其中包含一个从世界银行API检索国家信息的服务，这样我就可以显示搜索到的任何国家的名称、首都、地区、收入水平、经度和纬度。我可以使用文本输入字段成功地显示6属性的一个国家通过搜索其2位数iso2Code，但不是由国家的名称。WB API似乎不允许您通过国家名称进行查询。
我的代码：
worldbank.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

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

  constructor(private http: HttpClient) { }

  getCountryProperties(countryName: string): Observable<any> {
    const url = `${this.apiUrl}/${countryName}?format=json`;
    return this.http.get(url);
  }
}

字符串
country-info.component.ts

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[1][0];
      }
    );
  }
}

型
country-info.component.html

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

    <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>

型
我尝试将来自API调用的数据存储在一个数组中，然后比较用户输入，查看它是否与数组中任何属性的值匹配。我不确定如何选择并将整个对象存储在它自己的数组中，以便可以从中显示所需的属性。我也不确定这是否是正确的方法。