Angular 4 [object Object]

2019-07-22 05:33发布

问题:

Im trying to iterate over an array but the dom is displaying [ object Object] instead. In other threads some people recommended to use Stringify and then it display the info but I can't iterate over a string. Thanks for your help.

Here is my code:

html

<div *ngFor="let price of prices">
    {{prices}}
    </div>

service.ts

import { Injectable } from '@angular/core';
import { Http, Headers, Response } from '@angular/http';
import 'rxjs/add/operator/toPromise';
import {Observable} from "rxjs";
import 'rxjs/Rx';
import 'rxjs/add/operator/catch';
import { MarketViewModel } from '../comprarmonedas/datosmoneda'


@Injectable()
export class BittrexService {

  constructor(private http: Http, private marketModel : MarketViewModel) { }

  public getPrices() :Observable<MarketViewModel> {
    return this.http.get('https://bittrex.com/api/v1.1/public/getmarketsummary?market=btc-zec')
    .map((response: Response) => response.json());
  }

}


interface

export class MarketViewModel {
  public success : boolean;
  public message : string;
  public result : MarketListObject[];
}

export class MarketListObject {
    public MarketName : string;
    public High : number;
    public Low : number;
    public Volume : number;
    public Last : number;
    public BaseVolume : number;
    public TimeStamp : number;
    public Bid : number;
    public Ask : number;
    public OpenBuyOrders : number;
    public OpenSellOrders : number;
    public PrevDay : number;
    public Created : number; 

}

component.ts

import { Component, OnInit } from '@angular/core';
import { Http, Response, Headers } from '@angular/http';
import { BittrexService } from '../../bittrex/bittrex.service';
import {Observable} from "rxjs";

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

  private prices = [];

  constructor(private bittrexService: BittrexService) {
    this.bittrexService = bittrexService;
  }

ngOnInit(){
  this.bittrexService.getPrices()
  .subscribe(
    data => this.prices = data.result
  );
}
 }

回答1:

Replace this :

<div *ngFor="let price of prices">
    High : {{price.High}} , Low : {{price.Low}}
</div>

You were trying to print array of obejcts prices, It should be price not prices

    High : {{price.High}} , Low : {{price.Low}}

Like this you can access any of the given values :

{
      "MarketName": "BTC-ZEC",
      "High": 0.16290000,
      "Low": 0.13087156,
      "Volume": 12760.98721068,
      "Last": 0.15650003,
      "BaseVolume": 1908.20341779,
      "TimeStamp": "2017-06-14T19:15:25.57",
      "Bid": 0.15650003,
      "Ask": 0.15786551,
      "OpenBuyOrders": 1130,
      "OpenSellOrders": 1257,
      "PrevDay": 0.13380000,
      "Created": "2016-10-28T17:13:10.833"
    }