Ionic Angular中如何引用CoinList API数据获取货币名称与符号

我来帮你补全代码并拆解具体的实现步骤，你现有的代码已经搭好了基础框架，只需要完善API请求和数据处理的部分就行：

1. 完善ConvertPage组件代码（coin.ts） #

下面是补全后的完整代码，包含API请求、数据转换和错误处理逻辑：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@IonicPage()
@Component({
  selector: 'page-convert',
  templateUrl: 'convert.html',
})
export class ConvertPage {
  public coins: any[] = []; // 初始化空数组，避免模板渲染时出现空指针错误

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    private http: Http // 注入Http服务用于发起网络请求
  ) {}

  // 页面加载完成后触发数据请求
  ionViewDidLoad() {
    this.fetchCoinList();
  }

  // 调用API获取货币列表
  fetchCoinList() {
    const apiUrl = 'https://min-api.cryptocompare.com/data/all/coinlist';
    this.http.get(apiUrl)
      .map(response => response.json()) // 解析API返回的JSON数据
      .subscribe(
        data => {
          // API返回成功时处理数据
          if (data.Response === 'Success') {
            // 将API返回的对象格式数据转为数组，仅提取Name和Symbol字段
            this.coins = Object.values(data.Data).map(coin => ({
              name: coin.Name,
              symbol: coin.Symbol
            }));
            console.log('成功获取货币列表:', this.coins);
          } else {
            console.error('获取货币列表失败:', data.Message);
          }
        },
        error => {
          // 捕获请求异常
          console.error('API请求出错:', error);
        }
      );
  }
}

代码说明： #

• 在构造函数中注入Http服务，这是发起网络请求的核心依赖
• 利用Ionic的ionViewDidLoad生命周期钩子，在页面加载完成后自动触发API请求
• API返回的data.Data是一个以货币ID为键的对象，通过Object.values()将其转为数组，再用map()提取我们需要的Name和Symbol字段
• 加入了双重错误处理：既处理API返回的业务错误，也捕获网络请求异常

2. 在模板中渲染数据（convert.html） #

在页面模板中通过*ngFor循环遍历货币列表，展示名称和符号：

<ion-header>
  <ion-navbar>
    <ion-title>货币列表</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <!-- 货币列表 -->
  <ion-list *ngIf="coins.length > 0">
    <ion-item *ngFor="let coin of coins">
      <h2>{{coin.name}}</h2>
      <p class="item-note">{{coin.symbol}}</p>
    </ion-item>
  </ion-list>

  <!-- 加载状态提示 -->
  <div *ngIf="coins.length === 0" class="loading-state">
    <p>正在加载货币列表...</p>
  </div>
</ion-content>

3. 额外注意事项 #

• 推荐使用HttpClient：如果你使用的是Angular 4.3+版本，更建议用HttpClient替代旧的Http服务，它默认会自动解析JSON数据，无需手动调用map()，导入方式为import { HttpClient } from '@angular/common/http';
• 模块配置：记得在app.module.ts中导入HttpModule（对应旧Http）或HttpClientModule（对应HttpClient），并添加到imports数组中，否则会出现服务找不到的错误
• API限流：CryptoCompare的这个公开API无需密钥，但请求频率过高会被限流，生产环境建议参考官方文档调整请求策略

内容的提问来源于stack exchange，提问作者Ace Spades