Javascript 角度4显示此区域中的数据

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

这里是一个JSON的例子，我不关心美元，但这是我正在处理的数据类型

最终目标是显示在页面上

Coin   Price

BTC    $4,281.28
ETH    $294.62 
etc..

JSON

服务文件

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

}

最后是html模板

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

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

是否应将不同的数据推入阵列<代码>coinsList=[]

删除json管道

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

{{coin}}

请按如下方式更新您的代码：

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)

        );

以及

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

{{coin.coinName}{{coin.price}}

---

这会产生你想要的结果。

有很多方法可以做到这一点。 您还可以执行以下操作：

html:

注意：我认为对象的数组更干净

注2：还可以创建自定义管道

---

Plunker:

我认为你不需要使用json管道（

coin | json

），然后我得到[object]通过在你的

循环
this.coinsList.push（{coinName:key，price:data[key].USD}）
，然后在视图中，{code>{coin.coinName}}{coin.price}

你可以像Rahul提到的那样做，或者按照这个答案，我已经修改了你的

coinList

数组，使其具有类似数组的对象，并带有coinName及其相应的价格[object object]，你需要为此维护一个有效的字段名并访问coin.BTCI可能还会添加一个货币过滤器，例如

{coin.coinName}{coin.price}currency:'USD:true:'1.2-2'}

不管怎样-这是一个很好的答案！

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

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)

        );

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

<div *ngFor="let coin of coinsList; let i = index;">
      <span>{{keyList[i]}}:  $ {{coin}}</span>
</div>

for(let key in data){
   this.coinsList.push(data[key]["USD"]);
   this.keyList.push(key);
}