Angular4エラーdiffをしようとして「[オブジェクトのオブジェクト]」

Question

私は、DOMにいくつかの情報を表示しようとしているが、私はこのエラーを取得：

Error: Error trying to diff '[object Object]'

https://www.surbtc.com/api/v2/markets/btc-clp/tickerから、このデータを反復されて何イムがやろうとし：

{"ticker":{"last_price":["1771455.0","CLP"],"min_ask":["1771432.0","CLP"],"max_bid":["1660003.0","CLP"],"volume":["178.37375119","BTC"],"price_variation_24h":"-0.107","price_variation_7d":"-0.115"}}

私はこのようなHTMLでそれを表示したい：

<div *ngFor="let price of prices"> 
    {{price.min_ask}} 
    </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 { SurbtcMarket } from './surbtcmarket' 


@Injectable() 
export class SurbtcService { 

    constructor(private http: Http, private surBtcMarket : SurbtcMarket) { } 

    public getPricess() :Observable<SurbtcMarket> { 
    return this.http.get('https://www.surbtc.com/api/v2/markets/btc-clp/ticker') 
    .map((response: Response) => response.json()); 
    } 

} 

インタフェースsurbtcmarket.ts

export class SurbtcMarket { 
public ticker: SurbtcMarketView[]; 
} 

export class SurbtcMarketView { 
    public last_price : number; 
    public min_ask : number; 
    public max_bid : number; 
    public volume : number; 
    public price_variation_24h : number; 
    public price_variation_7d : number; 
} 

component.ts助けを

import { Http, Response, Headers } from '@angular/http'; 
import { SurbtcService } from '../../surbtc/surbtc.service'; 
import {Observable} from "rxjs"; 

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

    private prices = []; 

    constructor(private surbtcService: SurbtcService) { 
    this.surbtcService = surbtcService; 
    } 

ngOnInit(){ 
    this.surbtcService.getPricess() 
    .subscribe(
    data => this.prices = data.ticker 
); 
} 
} 

ありがとう！私はちょうど学んでいます。

Answer 1

あなたは配列としてpriceを持つようにしたい場合は、prices配列にpushオブジェクトを持っています。

ngOnInit(){ 
    this.surbtcService.getPricess() 
    .subscribe(
    data => this.prices.push(data.ticker); 
); 
} 

OR、あなただけの直接pricesにdata.tickerを割り当てることによって、オブジェクトのプロパティにアクセスすることができます。

private prices = new SurbtcMarketView(); 

constructor(private surbtcService: SurbtcService) { 

} 
ngOnInit(){ 
    this.surbtcService.getPricess() 
     .subscribe(data =>{ 
      this.prices = data.ticker; 
     }); 
} 

HTML：

<div *ngFor="let item of prices.min_ask"> 
    {{item}} 
</div> 

がUPDATE：

がPlnkr demoを参照してください、私はJSONレスポンスを解析して、エラーの原因となった問題を解決してきました。

Answer 2

public getPricess() :Observable<SurbtcMarket> { return this.http.get('https://www.surbtc.com/api/v2/markets/btc-clp/ticker') .map((response: Response) => response.json() as SurbtcMarket); } 

これは、型にマップされていないためです。そして、私はこれがそうでなければあなたが配列を返す必要がある1つのオブジェクトを返すだけと仮定します。

public getPricess() :Observable<SurbtcMarket[]> { return this.http.get('https://www.surbtc.com/api/v2/markets/btc-clp/ticker') .map((response: Response) => response.json() as SurbtcMarket[]); }