Angular6的ngFor遍历JSON对象

文章参考

1. Angular6的ngFor遍历对象数组

案例

1. 定义一个JSON对象，利用Object.keys方法

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-ngfor-object',
  templateUrl: './ngfor-object.component.html',
  styleUrls: ['./ngfor-object.component.scss']
})
export class NgforObjectComponent implements OnInit {

  personObj: any
  objectKeys = Object.keys;

  constructor() { 
    this.personObj = {
      name: 'zhangsan',
      age: 18,
      address: 'my address'
    }
  }

  ngOnInit(): void {
  }

}

2. 在html中显示JSON对象的数据

<p>ngfor-object works!</p>
<div *ngFor="let key of objectKeys(personObj)">
  {{key}} : {{personObj[key]}}
</div>