在模板angular 5中显示嵌套json数组的项

data = [
  {
    name: 'John',
    age: 25,
    hobbies: ['reading', 'coding', 'gaming']
  },
  {
    name: 'Jane',
    age: 30,
    hobbies: ['painting', 'traveling']
  }
];

export class AppComponent {
  data = [
    {
      name: 'John',
      age: 25,
      hobbies: ['reading', 'coding', 'gaming']
    },
    {
      name: 'Jane',
      age: 30,
      hobbies: ['painting', 'traveling']
    }
  ];
}

<ul>
  <li *ngFor="let item of data">
    <h3>{{ item.name }}</h3>
    <p>Age: {{ item.age }}</p>
    <p>Hobbies:</p>
    <ul>
      <li *ngFor="let hobby of item.hobbies">{{ hobby }}</li>
    </ul>
  </li>
</ul>