时间戳

首页 > 解决方案 > Angular 5：使用 ngFor 遍历 [object].Array[object].[object].property

angular - Angular 5：使用 ngFor 遍历 [object].Array[object].[object].property

问题描述

我正在尝试使用 Angular 框架学习 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);

      }

    }

标签： angulartypescript

解决方案

您有两个字段名为 FullName 的对象，您应该访问它，

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

推荐阅读