如何在模板内打印对象的键和值？答案

【问题标题】：How to print key and value of object inside template?如何在模板内打印对象的键和值？
【发布时间】：2020-12-17 15:48:23
【问题描述】：

如何打印模板内对象的键和值？

模板是'剑道图表系列项目工具提示'

我的 HTML

<kendo-chart-series-item-tooltip>
  <ng-template let-value="value" let-category="category" let-series="series" let-dataItem="dataItem">
    <div *ngFor="let item of dataItem.subObject| keyvalue">
      {{item | json}}<br/>
      Key:{{item.key}} and Value:{{item.value}}
      <br/><br/>
    </div>
  </ng-template>
</kendo-chart-series-item-tooltip>

我的 JSON：

[
  {
    "id": "1Period",
    "subObject": [{"Alex":"10"},{"Mathew":"5"}],
  },
  {
    "id": "2Period",
    "subObject": [{"Alex":"2"},{"Mathew":"50"}]
  }
]

此代码不起作用并返回此错误：

未捕获的错误：模板解析错误：找不到管道“键值”

【问题讨论】：

标签： json angular ngfor

【解决方案1】：

可能你想这样设置

{ "id": "1 期", “子对象”：[ { “关键”：“亚历克斯”， “价值”：“10”} }

你的 HTML 文件是这样的

<kendo-chart-series-item-tooltip>
  <ng-template >
    <div *ngFor="let item of dataItem.subObject">
     <br/>
      Key:{{item.key}} and Value:{{item.value}}
      <br/><br/>
    </div>
  </ng-template>
</kendo-chart-series-item-tooltip>

【讨论】：

【解决方案2】：

您可以定义以下自定义管道：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'forObject'
})
export class ForObjectPipe implements PipeTransform {

  transform(value: object): string[] {
    if (!value) {
      return [];
    }

    return Object.keys(value);
  }

}

然后像这样使用它：

<kendo-chart-series-item-tooltip>
  <ng-template let-value="value" let-category="category" let-series="series" let-dataItem="dataItem">
    <div *ngFor="let key of dataItem.subObject | forObject">
      {{dataItem.subObject[key] | json}}<br/>
      Key:{{key}} and Value:{{dataItem.subObject[key]}}
      <br/><br/>
    </div>
  </ng-template>
</kendo-chart-series-item-tooltip>

如果您在定义管道时遇到问题，请查看my boilerplate。

【讨论】：