Angular 4显示此处的数据 [英] Angular 4 display data that is in this

问题描述

我不喜欢从API返回到angular 4应用程序的数据。

I do not like the data that is coming back from an API to my angular 4 application.

以下是JSON的一个例子，我对美元一无所知，但这是我正在处理的数据类型

Here is an example of the JSON , I don't care anything about the USD, but this is the type of data that I'm dealing with

最终目标是在页面上显示

End goal is to display on the page

Coin   Price

BTC    $4,281.28
ETH    $294.62 
etc..

JSON

{
    "BTC": {
    "USD": 4281.28
    },
    "ETH": {
    "USD": 294.62
    },
    "LTC": {
    "USD": 43.4
    },
    "EOS": {
    "USD": 1.7
    },
    "DASH": {
    "USD": 197.69
    }
}

服务文件

getAllCoins(): Observable<Response> {
    return this.http.get(this._url)
        .map(res => res.json())
        .do(data => console.log('coins ' + JSON.stringify(data)))
        .catch(this.handleError)

}

订阅coinService的组件文件

Component file that subscribes to coinService

this.coinService.getAllCoins()
        .subscribe(
        (data) => {
            for (let key in data) {
                this.coinsList.push(data[key]);
                console.log('key', key)
            }
        },
        (error) => console.log("error : " + error)

        );

最后模板html

 <div *ngFor="let coin of coinsList">
  <span>{{coin | json}}</span>
</div>

我可以看到键将显示BTC etc ..在console.log
然后在我看到的页面上

I can see that key will display BTC etc.. in console.log and then on the page I see

 { "USD": 4234.31 }

但我不想看到括号和所有这些，而是​​硬币（BTC）和价格 -

But I don't want to see brackets and all that , but instead coin (BTC) and Price -

我应该将不同的数据推送到我的阵列吗？ coinsList = [];

Should I push different data into my array ? coinsList = [];

推荐答案

请更新您的代码，如下所示：

Please update your code like below :

this.coinService.getAllCoins()
        .subscribe(
        (data) => {
            for (let key in data) {
               this.coinsList.push({coinName:key,price:data[key].USD}); //change is here
                console.log('key', key)
            }
        },
        (error) => console.log("error : " + error)

        );

and in View

and in View

<div *ngFor="let coin of coinsList"> <span>{{coin.coinName}} {{coin.price}}</span> </div>

这应该会产生你想要的结果。

This should yield your desire result.

这篇关于Angular 4显示此处的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！