如何在angular 6中使用ngFor循环嵌套的json对象？

{
  "countries": [
    {
      "name": "China",
      "cities": [
        { "name": "Beijing" },
        { "name": "Shanghai" },
        { "name": "Guangzhou" }
      ]
    },
    {
      "name": "USA",
      "cities": [
        { "name": "New York" },
        { "name": "Los Angeles" },
        { "name": "Chicago" }
      ]
    }
  ]
}

<div *ngFor="let country of countries">
  <h1>{{ country.name }}</h1>
  <ul>
    <li *ngFor="let city of country.cities">{{ city.name }}</li>
  </ul>
</div>