Angular4 尝试区分“[object Object]"时出错 [英] Angular4 Error trying to diff '[object Object]'
问题描述
我正在尝试在 dom 中显示一些信息,但出现此错误:
<块引用>错误:尝试区分[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 中显示它:
{{price.min_ask}}
这是 service.ts:
import { Injectable } from '@angular/core';从@angular/http"导入 { Http, Headers, Response };导入 'rxjs/add/operator/toPromise';从rxjs"导入 {Observable};导入'rxjs/Rx';导入 'rxjs/add/operator/catch';从 './surbtcmarket' 导入 { SurbtcMarket }@Injectable()导出类 SurbtcService {构造函数(私有http:Http,私有surBtcMarket:SurbtcMarket){}public getPricess() :Observable{return this.http.get('https://www.surbtc.com/api/v2/markets/btc-clp/ticker').map((response: Response) => response.json());}}
界面surbtcmarket.ts
导出类 SurbtcMarket {公开代码: SurbtcMarketView[];}导出类 SurbtcMarketView {公共 last_price : 数字;公共 min_ask : 数字;公共最大出价:数字;公众号:数量;public price_variation_24h : 数字;public price_variation_7d :数字;}
component.ts
import { Http, Response, Headers } from '@angular/http';从'../../surbtc/surbtc.service'导入{ SurbtcService};从rxjs"导入{Observable};@零件({选择器:'app-comprarltc',templateUrl: './comprarltc.component.html',styleUrls: ['./comprarltc.component.scss']})导出类 ComprarltcComponent 实现 OnInit {私人价格 = [];构造函数(私有 surbtcService:SurbtcService){this.surbtcService = surbtcService;}ngOnInit(){this.surbtcService.getPricess().订阅(数据 =>this.prices = data.ticker);}}
如果你想把 price
作为一个数组,那么你有 push
在 中的对象>prices
数组.
ngOnInit(){this.surbtcService.getPricess().订阅(数据 =>this.prices.push(data.ticker););}
或者,您可以通过将 data.ticker
分配给 prices
来直接访问对象属性.
私有价格 = new SurbtcMarketView();构造函数(私有 surbtcService:SurbtcService){}ngOnInit(){this.surbtcService.getPricess().订阅(数据=>{this.prices = data.ticker;});}
HTML:
{{物品}}
更新:
查看 Plnkr 演示,我已经解决了导致错误的问题解析 json 响应.
I'm trying to display some info in the dom but I get this error:
Error: Error trying to diff '[object Object]'
What Im trying to do is iterate over this data from 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"}}
I want to display it in the html like this:
<div *ngFor="let price of prices">
{{price.min_ask}}
</div>
this is the 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());
}
}
Interface 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
);
}
}
If you want to have price
as an array, then you have push
the object in prices
array.
ngOnInit(){
this.surbtcService.getPricess()
.subscribe(
data => this.prices.push(data.ticker);
);
}
OR, you can just directly access the object properties by assigning data.ticker
to 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:
See the Plnkr demo, I have resolved the issue that was causing error in parsing the json response.
这篇关于Angular4 尝试区分“[object Object]"时出错的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!