angular - 如何从动态对象中获取数据

Question

[
  {
    "title": "Battery",
    "sections": {
      "Capacity": "2",
      "Type": "1"
    }
  },
  {
    "title": "Процесор",
    "sections": {
      "Number of nuclei": "22",
      "Processor name": "33",
      "Frequency": "11"
    }
  },
  {
    "title": "Display",
    "sections": {
      "The type of matrix": "222",
      "Screen diagonal": "111"
    }
  }
]

如何从中获取数据（在模板中）：

标题：（电池）

键------------> 值：

容量 -------------> 2

键入 -----------------> 1

标题 2：（处理器）

键------------>值

标题 3：（显示）

键------------>值

标签： angular

Answer 1

你可以使用keyvalue管道。尝试以下

<div *ngFor="let item of obj">
  Title - {{ item.title }}
  <div *ngFor="let section of item.sections | keyvalue">
    {{ section.key }} - {{ section.value }}
  </div>
  <br>
</div>

工作示例：Stackblitz

注意：keyvalue管道是在 Angular v6.1.0 中引入的。可以在此处找到早期版本的解决方案。