Angular如何使用click函数根据国家名称提取和显示特定的JSON数据

<button (click)="getCountryData('China')">提取中国的JSON数据</button>

import { Component } from '@angular/core';

@Component({
  selector: 'app-country',
  templateUrl: './country.component.html',
  styleUrls: ['./country.component.css']
})
export class CountryComponent {
  getCountryData(countryName: string) {
    // 在这里编写根据国家名称提取和显示特定JSON数据的逻辑
  }
}

import { HttpClient } from '@angular/common/http';

// ...

constructor(private http: HttpClient) {}

getCountryData(countryName: string) {
  this.http.get<any>('path/to/country-data.json').subscribe(data => {
    // 在这里处理获取到的JSON数据
    // 可以使用国家名称过滤数据，提取特定的JSON数据
  });
}

import { HttpClient } from '@angular/common/http';

// ...

countryData: any;

constructor(private http: HttpClient) {}

getCountryData(countryName: string) {
  this.http.get<any>('path/to/country-data.json').subscribe(data => {
    // 在这里处理获取到的JSON数据
    // 可以使用国家名称过滤数据，提取特定的JSON数据
    this.countryData = data.filter(item => item.country === countryName);
  });
}

<div *ngIf="countryData">
  <h2>{{ countryData.name }}</h2>
  <p>人口: {{ countryData.population }}</p>
  <p>首都: {{ countryData.capital }}</p>
  <!-- 其他国家数据的显示 -->
</div>