在Angular Component Template文件中解析对象

Question

我的address.component.ts中有一个对象如下：

address : any;

这是从后端

填充地址的数据

{street1: "abc"
 city: "some state"
 country: "some country"
}

我在拨打服务后收到这些数据。

我的模板文件如下：

<h1>{{address}}</h1>

在浏览器上，显示如下：

[Object object]

而不是这个，我想显示整个地址对象。我知道我可以做到

<h1>{{address.street1}}</h1>
<h1>{{address.state}}</h1>
<h1>{{address.country}}</h1>

但我不想这样做，因为后端可能会更改地址中的字段（比如添加一个字段）。有什么方法可以在浏览器中显示address对象中的所有数据而不仅仅是[Object object]。

Answer 1

使用

<h1 ng-repeat="(key, value) in address">{{value}}</h1>

ng-repeat根据其中的条件重复您的元素。

有关详细信息，请参阅ng-repeat documentation。

Answer 2

您可以使用此功能获取所有信息。之后，用HTML打印：

var newAddress = Object.values(address);