从角度6中的json api获取数组值

Question

API

{"Data":[{"SYMBOL":"XBTUSD","SUPPLY":0,"FULLNAME":"XBTUSD","NAME":"XBTUSD","ID":-1,"VOLUME24HOURTO":1666015703.2591257},{"SYMBOL":"BTC","SUPPLY":17294062,"FULLNAME":"Bitcoin (BTC)","NAME":"Bitcoin","ID":"1182","VOLUME24HOURTO":487020997.4281679},{"SYMBOL":"ETH","SUPPLY":102248936.0928,"FULLNAME":"Ethereum (ETH)","NAME":"Ethereum","ID":"7605","VOLUME24HOURTO":189913859.14174834}],
"Type":100,
"Response":"Success",
"VolSymbol":"USD",
"Message":"All ok"}

Data.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})


export class DataService {
  Data:any;

constructor(private _http: HttpClient) {}

getTop() {
    return this._http.get("https://min-api.cryptocompare.com/data/top/volumes?tsym=USD&limit=4")
    .pipe(map(result => this.Data = result));
  }
}

prices.component.ts

export class PricesComponent implements OnInit {

cryptos: Array<Object>;

  constructor(private dataService: DataService) 
{
    this.dataService.getTop().subscribe(res => {
      this.cryptos = res.Data;
      console.log(res);
    });

  }

  ngOnInit() {
  }

}

我想获取该数组中列出的所有数据值。我在 prices.component.ts 中遇到错误，因为它无法读取值数据。

我也不确定如何循环 Data 中的值并在 html 文件中打印相应的对象。我想在 html 文件中有类似的东西：

符号：“BTC”

供应：17294062

全名：“比特币

VOLUME24HOURTO":487020997.4281679

符号：“ETH”

供应：102248936.0928

FULLNAME:"以太坊

VOLUME24HOURTO:189913859.14174834

Answer 1

1) 数据服务

ng g s Data

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

@Injectable({
  providedIn: 'root'
})


export class DataService {
  Data:any;

constructor(private _http: HttpClient) {}

getTop() {
    return this._http.get<any>("https://min-api.cryptocompare.com/data/top/volumes?tsym=USD&limit=4");
  }
}

2) AppModule.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { PricesComponent } from './prices/prices.component';

const appRoutes: Routes = [
  { path: '', component: PricesComponent }
];

@NgModule({
  declarations: [
    AppComponent,
    PricesComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    )
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3) PriceComponent.ts

ng g c Prices

import { Component, OnInit } from '@angular/core';
import {DataService} from '../data.service'

@Component({
  selector: 'app-prices',
  templateUrl: './prices.component.html',
  styleUrls: ['./prices.component.css']
})
export class PricesComponent implements OnInit {

  cryptos:any;

  constructor(private dataService: DataService) 
  {
    this.dataService.getTop().subscribe(res => {
      this.cryptos = res['Data'];
      console.log(this.cryptos);
    });

  }

  ngOnInit() {
  }

}

4) Pricecomponent.html

<div *ngFor="let el of cryptos">
  FULLNAME {{el.FULLNAME}}--
  SYMBOL {{el.SYMBOL}}--
  SUPPLY {{el.SUPPLY}}--
  NAME {{el.NAME}}--
  VOLUME24HOURTO {{el.VOLUME24HOURTO}}
</div>  

5) AppComponent.html

<router-outlet></router-outlet>

Answer 2

您的 .Data 问题可以通过 res['Data'] 解决。另外，在 html 中循环尝试：

在ts中：

this.map = {}
for (key in res['Data']) {
   let el = {}
   el['key'] = key
   el['val'] = res['Data'][key]
   this.map.push(el)
}

在 html 中：

<div *ngFor="let el in map">
   {{el.key}}: {{el.value}}
</div>