如何在 Angular 中解析 JSON 对象

Question

我试图从 Angular 应用程序调用“https://restcountries.com/v3.1/all”，并且在 HTML 页面中显示结果时，我能够解析 Name、flag 、 Capital 但当尝试显示时货币显示为[object object]

这是我用html编写的代码

<tbody>
    <tr *ngFor="let c of data">
      <td>{{ c.name.common }}</td>
      <td>{{ c.capital }}</td>
      <td>{{ c.flag }}</td>
       <td>{{ c.currencies }}</td>
    </tr>
  </tbody>

这是我在服务中编写的代码

 public getContrires():any {
    return this._httpClient.get('https://restcountries.com/v3.1/all');
  }

HTML 输出结果如下

提前致谢。

我在下面的 html 中尝试过，但仍然没有成功

<td *ngFor="let cur of c.currencies">{{ curr.name }}</td>

Answer 1

c.currencies

确实是一个嵌套对象。为了获取货币符号，您需要钻取该对象。像这样：

<td>{{ c.currencies[Object.keys(c.currencies)[0]].symbol }}</td>

希望能回答您的问题。

Answer 2

您可以使用 keyvalue 管道

迭代对象属性

将 Object 或 Map 转换为键值对数组。

最佳方法，因为一个国家可以采用多种货币

<ul>
  <li *ngFor="let c of products">
    {{ c?.name?.official }} <br />
    <div *ngFor="let d of c?.currencies | keyvalue">
      {{ d.value['name'] }} - {{ d.value['symbol'] }}
    </div>
  </li>
</ul>

请看看这个stackblitz