Question

我正在尝试使用Angular Framework学习Typescript。我认为从一个很好的起点处理API数据来学习一些基础知识。这是我从APi获得的数据 https://min-api.cryptocompare.com/

我不知道如何迭代数据来做这样的事情。我怎么能这样做？

<ons-button (click)="getToplistByTotalVolume()">Aktualisieren</ons-button>
    <ons-list id="crypto-container" *ngFor="let toplistByTotalVolumeItem of toplistByTotalVolume; index as i">
      <ons-list-item>
        <div class="center">
            {{ toplistByTotalVolumeItem.FullName }}
        </div>
      </ons-list-item>
    </ons-list>

以下是其他代码：

// app.component.ts

import { Component } from '@angular/core';
import { CcapiService } from './shared/ccapi.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})

export class AppComponent {
  toplistByTotalVolume: any;
  fiatCurrencies: string[];
  fiatCurrency: string = 'USD';


  constructor(private _data: CcapiService) {
  }

  ngOnInit() {
    this.fiatCurrencies = ['EUR', 'USD'];
    this.getToplistByTotalVolume()
  }

  getToplistByTotalVolume() {
    this._data.serviceToplistByTotalVolume(this.fiatCurrency)
      .subscribe(res => {
        this.toplistByTotalVolume = res;
        console.log(res);
      });
  }
}



// ccapi.service.ts
    import { Injectable } from '@angular/core';
    import { HttpClient } from '@angular/common/http';
    import {Observable} from 'rxjs';
    import 'rxjs/add/operator/map';

    @Injectable()
    export class CcapiService {

      result1:any;
      result2:any;

      constructor(private _http: HttpClient) { }

      serviceGetSingleSymbolPrice(fiatCurrency: string, exchanger?: string) {
        return this._http.get(`https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH,LTC&tsyms=${fiatCurrency}&e=${exchanger}`).map(result1 => this.result1 = result1);
      }

      serviceToplistByTotalVolume(fiatCurrency: string, exchanger?: string) {
        return this._http.get(`https://min-api.cryptocompare.com/data/top/totalvol?limit=1&tsym=${fiatCurrency}`).map(result2 => this.result2 = result2);

      }

    }

Answer 1

您有两个具有fieldnamed FullName的对象，您应该将其作为

访问

  <ons-list-item>
    <div class="center">
        {{ toplistByTotalVolumeItem.CoinInfo.FullName }}
    </div>
  </ons-list-item>

Answer 2

您将toplistByTotalVolume设置为等于订阅中的响应，该订阅是具有Data，Message，SponserData属性的对象，和Type。然后，Data数组中的每个对象都具有属性CoinInfo和ConversionInfo。因此，要显示每个项目的名称，请浏览toplistByTotalVolumeObject的数据并通过CoinInfo访问该名称。

<ons-button (click)="getToplistByTotalVolume()">Aktualisieren</ons-button>
<ons-list id="crypto-container" *ngFor="let toplistByTotalVolumeItem of toplistByTotalVolume.Data;">
  <ons-list-item>
    <div class="center">
        {{ toplistByTotalVolumeItem.CoinInfo.FullName }}
    </div>
  </ons-list-item>
</ons-list>

修改

为了简化这一点，您可以将toplistByTotalVolumeItem设置为特定等于数据而不是整个响应。如果您这样做，则无法访问响应的其他属性，而无法以其他方式保存，例如Message，SponserData和Type。

getToplistByTotalVolume() {
  this._data.serviceToplistByTotalVolume(this.fiatCurrency)
    .subscribe(res => {
      this.toplistByTotalVolume = res.Data; //<--Here
      console.log(res); //<--This will log the entire response
      console.log(this.toplistByTotalVolume); //<--This will only log the `Data` property of the response, which is your array
    });
}

然后你可以遍历toplistByTotalVolume：

<ons-list id="crypto-container" *ngFor="let toplistByTotalVolumeItem of toplistByTotalVolume;">

但是，您仍然需要使用{{toplistByTotalVolumeItem.CoinInfo.FullName}}显示名称，因为每个数据项都是CoinInfo和ConversionInfo的对象。

Angular 5：迭代[object] .Array [object]。[object] .property with ngFor

2 个答案:

修改