IONIC v3获取CoinMArketCap API数据

Posted 2021-03-30

我想在离子的帮助下显示市场上所有可用的加密硬币列表。

我为此使用了coinmarketcap api。 https://coinmarketcap.com/api/

我已经参考了这个教程 - > https://www.djamware.com/post/59924f9080aca768e4d2b12e/ionic-3-consuming-rest-api-using-new-angular-43-httpclient

我面临的问题是我无法列出所有硬币。我能够从api检索数据，但我想在显示数据时存在问题。

api返回的数据

{
    "data": [
        {
            "id": 1, 
            "name": "Bitcoin", 
            "symbol": "BTC", 
            "website_slug": "bitcoin"
        }, 
        {
            "id": 2, 
            "name": "Litecoin", 
            "symbol": "LTC", 
            "website_slug": "litecoin"
        }, 
        ...
    },
    "metadata": {
        "timestamp": 1525137187, 
        "num_cryptocurrencies": 1602, 
        "error": null
    }
]        

发生了错误

错误错误：无法找到'object'类型的不同支持对象'[object Object]'。 NgFor仅支持绑定到诸如Arrays之类的Iterables。 （MarketPage.html 18）

at NgForOf.ngOnChanges (VM5532 vendor.js:45147)
at checkAndUpdateDirectiveInline (VM5532 vendor.js:12781)
at checkAndUpdateNodeInline (VM5532 vendor.js:14309)
at checkAndUpdateNode (VM5532 vendor.js:14252)
at debugCheckAndUpdateNode (VM5532 vendor.js:15145)
at debugCheckDirectivesFn (VM5532 vendor.js:15086)
at Object.eval [as updateDirectives] (VM5623 MarketPage.ngfactory.js:56)
at Object.debugUpdateDirectives [as updateDirectives] (VM5532 vendor.js:15071)
at checkAndUpdateView (VM5532 vendor.js:14218)
at callViewAction (VM5532 vendor.js:14569)

Rest.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class RestProvider {

apiUrl = 'https://api.coinmarketcap.com/v2'; 

constructor(public http: HttpClient) {
console.log('Hello RestProvider Provider');
}

getAllCoinsListing() {
return new Promise(resolve => {
  this.http.get(this.apiUrl+'/listings').subscribe(data => {
    resolve(data);
  }, err => {
    console.log(err);
  });
});
}
}

Market.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { RestProvider } from '../../providers/rest/rest';

@Component({
  selector: 'page-market',
  templateUrl: 'market.html'
})
export class MarketPage {

  marketData: any;

  constructor(public navCtrl: NavController, public restProvider: 
           RestProvider) {
          this.getAllCoinsListing();
  }

  getAllCoinsListing() {
     this.restProvider.getAllCoinsListing()
     .then(data => {
      this.marketData = data;
     });
  }

}

MarketPage.html

<ion-content>
    <ion-list inset>
         <ion-item *ngFor="let data of marketData">
             <h2>{{data.name}}</h2>
             <p>{{data.name}}</p>
         </ion-item>
     </ion-list>
 </ion-content>

答案

建议使用Observables over promises。通过转换为承诺，您将失去取消请求的能力以及链接RxJSoperators的能力。

修改后的代码

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
@Injectable()
export class RestProvider {

apiUrl = 'https://api.coinmarketcap.com/v2/listings/'; 

constructor(public http: HttpClient) {
console.log('Hello RestProvider Provider');
}

getAllCoinsListing() {

 return this.http.get(this.apiUrl).map(res=>{return res['data']});//return data of result
}
}

Market.ts

     import { Component } from '@angular/core';
        import { NavController } from 'ionic-angular';
        import { RestProvider } from '../../providers/rest/rest';

            @Component({
              selector: 'page-market',
              templateUrl: 'market.html'
            })
            export class MarketPage {

              marketData: Array<any>=[];
             //your API returns an array of object

              constructor(public navCtrl: NavController, public restProvider: 
                       RestProvider) {
                      this.getAllCoinsListing();
              }

             getAllCoinsListing() {
           this.restProvider.getAllCoinsListing().
        subscribe(data=>this.marketData=data);

  }

            }

Live Demo