Question

我已经使用api“ https://api.coinmarketcap.com/v2/ticker/”来显示所有具有当前价格和市值的硬币。 Api包含如图所示的数据

  {
"data": {
    "1": {
        "id": 1, 
        "name": "Bitcoin", 
        "symbol": "BTC", 
        "website_slug": "bitcoin", 
        "rank": 1, 
        "circulating_supply": 17144525.0, 
        "total_supply": 17144525.0, 
        "max_supply": 21000000.0, 
        "quotes": {
            "USD": {
                "price": 6351.1, 
                "volume_24h": 3536780000.0, 
                "market_cap": 108886592728.0, 
                "percent_change_1h": -0.11, 
                "percent_change_24h": -0.4, 
                "percent_change_7d": -4.57
            }
        }, 
        "last_updated": 1531371457
    }, 
    "1027": {
        "id": 1027, 
        "name": "Ethereum", 
        "symbol": "ETH", 
        "website_slug": "ethereum", 
        "rank": 2, 
        "circulating_supply": 100636801.0, 
        "total_supply": 100636801.0, 
        "max_supply": null, 
        "quotes": {
            "USD": {
                "price": 441.823, 
                "volume_24h": 1359900000.0, 
                "market_cap": 44463653355.0, 
                "percent_change_1h": -0.23, 
                "percent_change_24h": 1.53, 
                "percent_change_7d": -6.71
            }
        }, 
        "last_updated": 1531371451
    }, 
    "52": {
        "id": 52, 
        "name": "XRP", 
        "symbol": "XRP", 
        "website_slug": "ripple", 
        "rank": 3, 
        "circulating_supply": 39262444717.0, 
        "total_supply": 99991916481.0, 
        "max_supply": 100000000000.0, 
        "quotes": {
            "USD": {
                "price": 0.445663, 
                "volume_24h": 171535000.0, 
                "market_cap": 17497818900.0, 
                "percent_change_1h": -0.16, 
                "percent_change_24h": -0.28, 
                "percent_change_7d": -9.26
            }
        }, 
        "last_updated": 1531371500
         ....

这是我的代码

got-http.service.ts

 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import {Http, Response} from '@angular/http';
 import { Observable } from 'rxjs';
 import 'rxjs/add/operator/catch';
 import 'rxjs/add/operator/do';
 import 'rxjs/add/operator/map';
 import { HttpErrorResponse } from "@angular/common/http";


 @Injectable()
 export class GotHttpService {
 private baseUrl = 'https://api.coinmarketcap.com/v2/ticker' 
 constructor(private _http: HttpClient) {
  }


      getDetails(): any {
            let myResponse = this._http.get(this.baseUrl);
            return myResponse;



      }
  }

app.component.ts

 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Location } from '@angular/common';          
 import { GotHttpService } from './got-http-service.service';
 import { Pipe, PipeTransform } from '@angular/core';
 import { HttpClientModule } from '@angular/common/http'; 

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
 })
 export class AppComponent {
 details: any;
 constructor(private _route: ActivatedRoute, private router: Router, 
 private gotHttpService: GotHttpService , private location: Location) 
 { 
  }

ngOnInit() {
this.gotHttpService.getDetails().subscribe(
          data => {

            this.details = data;
}
)}}

app.component.html

 <div *ngFor="let key of details">
{{key.name}}
{{key.USD.price}}
{{key.USD.market_cap}}


</div>

但是没有任何内容显示为输出。但是，我没有收到任何错误，但仍然没有在屏幕上获取提取的数据。

Answer 1

第一件事是您的数据不在包含 Object 的 Array 中，您需要将其转换为键上方的数组：

您需要像这样声明一个details数组

details: Array<any> = [];

在您的订户方法中，应该是：

 this.gotHttpService.getDetails().subscribe(
      data => {

        // Step 1. Get all the object keys.
        let tmpAllKeys = Object.keys(data.data);
        // Step 2. Create an empty array.
        let tmpArray = [];
        // Step 3. Iterate throw all keys.
        for (let prop of tmpAllKeys) { 
            tmpArray.push(data.data[prop]);
        }
        this.details = tmpArray;

    });

在您的html中是这样的：

<div *ngFor="let key of details">
    {{key.name}} {{key.quotes?.USD?.price}} {{key.quotes?.USD?.market_cap}}
</div>

这是工作示例：Display Data

Angular-无法使用Coinmarketcap API获取数据

1 个答案: