json - 如何在 TypeScript 中迭代 JSON 属性

标签 json angular typescript

我的问题很简单,我有一个 JSON Typescript 对象,我喜欢迭代 trought JSON 属性

{"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"}

使用的代码是以下 Angular TypeScript 组件:

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 中。

非常感谢!

最佳答案

如果您使用的是 angular 6.1,请使用键值管道

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

对于 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

关于json - 如何在 TypeScript 中迭代 JSON 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51732524/

相关文章:

angular - 从 Angular 2 调用 Laravel 后端 api

angular - 属性类型 'responseType' 不兼容

c# - PostAsJsonAsync 似乎没有发布正文参数

c# - 无法从 Microsoft 文本分析主题情感识别获取输出结果

c# - 使用 JsonTextReader 值作为新流传递 Base64 编码的字符串

python - 检查json对象中的路径是否存在?

angular - 无法在服务器启动时重定向到延迟加载模块作为默认路由/URL

angular - 错误 : 422 (Unprocessable Entity). Angular4

typescript - 键入从同一基类继承的类列表的正确方法是什么?

javascript - 带有嵌套对象的 JSON 对象,所有对象都需要转换为 Typescript/Angular 5 中的类