Angular4錯誤嘗試的差異「的翻譯：」

-1

我想顯示在DOM中的一些信息，但我得到這個錯誤：Angular4錯誤嘗試的差異「的翻譯：」

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 
); 
} 
}

感謝您的幫助！我只是在學習。

來源

2017-06-15 Claudio Ramírez Guichard

[錯誤嘗試差異\ [object Object \]']（https://stackoverflow.com/questions/38216857/error-trying-to-diff-object-object） –

您可能得到的回覆從'https：// www.surbtc.com/api/v2/markets/btc-clp/ticker'不是JSON數組，而是JSON對象（在您的案例中爲'SurbtcMarket'的1個實例）。你不能在對象上使用'* ngFor'，因爲你不能遍歷它。 –

@NicoVanBelle謝謝你的回覆。有沒有辦法將該對象轉換爲數組？ –

如果你想有price作爲數組，那麼你有push在prices數組對象。

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

或者，你可以直接通過分配data.ticker到prices訪問對象的屬性。

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響應導致錯誤的問題。

來源

2017-06-15 20:26:24 Nehal

感謝您的回覆@Nehal。現在我得到一個打字錯誤，說該屬性代碼不存在類型surbtcMarket [] –

添加了一個工作Plnkr演示，請參閱更新的答案。 – Nehal

再次感謝@Nehal。現在，我在控制檯出現此錯誤「無法加載資源：服務器響應狀態爲406（不可接受）」。 –

-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); }

這可能是因爲它沒有映射到某個類型。而且我認爲這隻能回退一個對象，否則你必須返回一個數組。

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[]); }

來源

2017-06-15 18:23:03

Angular4錯誤嘗試的差異「的翻譯：」

回答

相關問題