【问题标题】：angular 4 print array with json object带有json对象的角度4打印数组
【发布时间】：2018-05-07 05:09:49
【问题描述】：

我的 .ts 文件中有这个数组，必须在我的 .html 中打印：

myArray: ["03/05/2018", "2:54", "xoxo", "briefing", "your", [{
    "Id": "1",
    "Time": "20:54",
    "Topic": "mmmmm",
    "GUEST1": {
      "Role": "HS",
      "Infos": "Alaska"
    },
    "GUEST2": {
      "Role": "GS",
      "Infos": "Arizona,"
    }
  },
  {
    "Id": "2",
    "Time": "21:55",
    "Topic": "vvvvv",
    "GUEST1": {
      "Role": "CS",
      "Infos": "Georgia"
    },
    "GUEST2": {
      "Role": "GS",
      "Infos": "Florida"
    },
    "GUEST3": {
      "Role": "HS",
      "Infos": "Delaware,"
    }
  },
  {
    "Id": "3",
    "Time": "1:56",
    "Topic": "fffff",
    "GUEST1": {
      "Role": "GS",
      "Infos": "Colorado"
    }
  }
]]

我该怎么做？
我可以使用 *ngFor 打印前 5 个项目，但在涉及 JSON 项目时会出现问题。是否可以在 GUEST 上进行子字符串比较以打印键的不同值？
类似的东西：

日期：03/05/2018
时间：2:54
名称：xoxo
主题：简报
其他：你的
块 ID：1
时间：20:54
话题：mmmmmm
客人 1 角色：HS
客人 1 信息：阿拉斯加
嘉宾2角色：GS 来宾 2 信息：亚利桑那州

【问题讨论】：

你想打印什么
你想在 html 中显示什么？
在模板中使用json管道。
想要在新行中打印每个项目数组。我可以使用 *ngFor 打印前 5 个项目，但在涉及 JSON 项目时会出现问题。是否可以在GUEST 上进行子字符串比较以打印键的不同值？

标签： javascript arrays json angular templates

【解决方案1】：

使用pre 标签显示任何格式化的字符串值。如果您需要将数据显示为格式化，请使用 JSON.stringify(arr, null, 2) 或 Angular 的内置 json 管道。

<pre [innerHTML]="formattedResult | json"></pre>

// alternate way
<pre [innerHTML]="formattedResult"></pre>

arr = [...];   // your arr data;
formattedResult = JSON.stringify(this.arr, null, 2);   // format

见 demo with pre 和 demo(key-value) with ngFor

【讨论】：

有没有办法通过数组将每个项目放在表格的一行或新的一行中？我已经用数组的格式更新了我的问题
@mamesaye 所以你想要一个两列键值表？
@mamesaye 为此，考虑使用 Object.keys 和 *ngFor
由于 GUESTX 不在数组中，如何循环获取所有 JSON 对象？
@mamesaye 我添加了一个复杂的工作演示，看看它是否有帮助。由于你的数据有点复杂，我只举一个第一层的实现作为例子。

【解决方案2】：

如果您想遍历数组，请使用*ngFor。

否则只需像这样使用json 管道

{{myArray | json}}

PS：您在这里错误地定义了数组，例如 myArray: ，: 用于声明数组的类型，而您正在为数组赋值，因此您应该使用 myArray =

working example

【讨论】：