Angular中如何获取美元/欧元对格里夫纳实时汇率并展示

1. 调整CurrencydataService服务 #

确保服务正确发起HTTP请求并定义响应类型，避免类型错误：

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

// 根据实际API返回结构定义接口
interface ExchangeRateResponse {
  rates: {
    UAH: number;
  };
  base: string;
}

@Injectable({ providedIn: 'root' })
export class CurrencydataService {
  // 替换为你使用的实时汇率API地址
  private apiEndpoint = 'https://your-exchange-rate-api.com/latest';

  constructor(private http: HttpClient) {}

  // 获取指定基准货币对UAH的汇率
  getRate(baseCurrency: string): Observable<ExchangeRateResponse> {
    // 根据API要求拼接参数，比如有些API需要app_id，自行补充
    return this.http.get<ExchangeRateResponse>(`${this.apiEndpoint}?base=${baseCurrency}`);
  }
}

2. 组件逻辑处理 #

在组件中注入服务，发起请求并存储汇率数据，同时处理错误状态：

// currency-converter.component.ts
import { Component, OnInit } from '@angular/core';
import { CurrencydataService } from './currencydata.service';
import { forkJoin } from 'rxjs';

@Component({
  selector: 'app-currency-converter',
  templateUrl: './currency-converter.component.html'
})
export class CurrencyConverterComponent implements OnInit {
  usdToUah: number | null = null;
  eurToUah: number | null = null;
  loadError: string = '';

  constructor(private currencyService: CurrencydataService) {}

  ngOnInit(): void {
    // 合并请求同时获取美元、欧元汇率，减少HTTP调用
    forkJoin([
      this.currencyService.getRate('USD'),
      this.currencyService.getRate('EUR')
    ]).subscribe({
      next: ([usdRes, eurRes]) => {
        this.usdToUah = usdRes.rates.UAH;
        this.eurToUah = eurRes.rates.UAH;
      },
      error: (err) => {
        this.loadError = '汇率加载失败，请稍后重试';
        console.error('请求异常:', err);
      }
    });
  }
}

3. 模板展示实时汇率 #

在模板中指定区域展示汇率，添加加载状态和错误提示：

<!-- currency-converter.component.html -->
<div class="rate-display">
  <h4>实时汇率（兑乌克兰格里夫纳）</h4>
  
  <!-- 错误提示 -->
  <div class="error-text" *ngIf="loadError">{{ loadError }}</div>

  <!-- 美元汇率 -->
  <div class="rate-item">
    <span>1 USD =</span>
    <span *ngIf="usdToUah; else loadingState">{{ usdToUah.toFixed(2) }} UAH</span>
  </div>

  <!-- 欧元汇率 -->
  <div class="rate-item">
    <span>1 EUR =</span>
    <span *ngIf="eurToUah; else loadingState">{{ eurToUah.toFixed(2) }} UAH</span>
  </div>

  <!-- 加载状态模板 -->
  <ng-template #loadingState><span class="loading">加载中...</span></ng-template>
</div>

关键排查点 #

• 确认已在AppModule中导入HttpClientModule，否则HTTP请求无法执行：

  // app.module.ts
  import { HttpClientModule } from '@angular/common/http';
  @NgModule({
    imports: [HttpClientModule, ...],
    ...
  })
  

• 核对API返回字段：如果API返回的汇率字段不是rates（比如部分API用conversion_rates），需要同步修改ExchangeRateResponse接口的字段名
• 跨域问题处理：若API不支持CORS，可在Angular项目根目录创建proxy.conf.json配置代理：

  {
    "/api": {
      "target": "https://your-exchange-rate-api.com",
      "secure": false,
      "changeOrigin": true,
      "pathRewrite": {"^/api": ""}
    }
  }
  

  同时在angular.json的serve配置中添加"proxyConfig": "proxy.conf.json"

内容的提问来源于stack exchange，提问作者alena love