如何在TypeScript中迭代JSON属性 [英] How to Iterate JSON properties in TypeScript

问题描述

我的问题很简单，我有一个下面的JSON Typescript对象，我想迭代处理JSON属性

My question is very simple, I have a following JSON Typescript Object and I like to Iterate trought the JSON properties

{"work_type":"Fabricación","work_type_resp":"Mesa","looking_for":"Relación Calidad/Precio","image":"https://s3-sa-east-1.amazonaws.com/online-quotation-images/153366018967.png","width":"22","high":"34","depth":"","modifications":"mod"}

使用的代码是以下有角度的TypeScript组件:

The code used is the following angular TypeScript component:

export class DetailsOnlineQuoteModalComponent implements OnInit {

  @Input() title;
  @Input() values:string;
  properties:JSON;

  constructor(public activeModal: NgbActiveModal) { }

  ngOnInit() {
    this.properties=JSON.parse(this.values);
    console.log(this.properties);
  }

}

我真正需要的是遍历JSON的键值属性，并在我的HTML中显示它们.

What I really need is to go through the key-value attributes of the JSON and show them in my HTML.

非常感谢！

推荐答案

如果您使用的是Angular 6.1，请使用键值管道

If you are using angular 6.1 use keyvalue pipe

<div *ngFor="let title of data | keyvalue">
  {{title.key}}
</div>

对于Angular 5

For Angular 5

<div *ngFor="let key of dataKeys">
  {{key}} ------------- {{data[key]}}
</div>
get dataKeys() { return Object.keys(this.data); }

示例: https://stackblitz.com/edit/keyvalue-pipe-qtaqnm

这篇关于如何在TypeScript中迭代JSON属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！