时间戳

首页 > 解决方案 > 带有json对象的角度4打印数组

javascript - 带有json对象的角度4打印数组

问题描述

我的 .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信息：亚利桑那州

标签： javascriptarraysjsonangulartemplates

解决方案

使用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

使用 pre和demo(key-value) 使用 ngFor查看演示

推荐阅读