本教程展示了打印对象数组的多种方法。一种方法是在Angular中使用json管道。另一种方法是使用对象属性符号
例如，我们在Angular的typescript组件中声明了一个对象数组。
roles: { id: number, name: string }[] = [ { "id": 0, "name": "admin" }, { "id": 1, "name": "user" }, { "id": 2, "name": "superadmin" } ];
在HTML中使用angular模板语法打印对象
{{roles}}
会在用户界面上打印[object Object]的列表，如下所示。
[object Object],[object Object],[object Object]
使用ngFor指令，我们将打印对象
<ul>
<li *ngFor="let role of roles">{{role}}</li>
</ul>
输出结果显示在用户界面上
[object Object]
[object Object]
[object Object]
如何将对象打印到屏幕或浏览器到控制台？
在Angular中使用json管道
Angular有内置的json管道，可以打印出json代码的美化效果。
在Html代码中，json管道的使用方法如下
{{roles|json}}
并打印出json
[ { "id": 0, "name": "admin" }, { "id": 1, "name": "user" }, { "id": 2, "name": "superadmin" } ]
另一种方法是用ngFor迭代并打印一个对象。
<ul>
<li *ngFor="let role of roles">{{role |json}}</li>
</ul>
使用对象符号打印对象的数组
在Javascript中，可以用两种语法来检索对象的值。
- 使用对象点符号语法。 使用点符号语法访问属性，如下所示
语法
object.property
下面是一个示例代码
<ul>
<li *ngFor="let role of roles">{{role .id}}- {{role.name}}</li>
</ul>
- 使用一个带有对象方括号的键
在这个例子中，通过将键传递给方括号来检索对象的值。
语法
object["key"]
下面是一个示例代码
<ul>
<li *ngFor="let role of roles">{{role["id"]}}- {{role["name"]}}</li>
</ul>
在上述两种情况下，输出如下所示
0- admin
1- user
2- superadmin
在组件中使用JSON.stringify来打印数组对象。
创建了一个getter。在typecript组件中使用JSON.stringify对数组对象进行反序列化。
get printroles() { return JSON.stringify(this.roles) };
在一个HTML组件中调用getter。
{{printroles}}
