如何在Angular 6中迭代dropdown函数的多嵌套JSON对象？

jsonData = {
  "countries": [
    {
      "name": "China",
      "cities": [
        {
          "name": "Beijing",
          "areas": [
            "Dongcheng",
            "Xicheng",
            "Chaoyang"
          ]
        },
        {
          "name": "Shanghai",
          "areas": [
            "Pudong",
            "Huangpu",
            "Xuhui"
          ]
        }
      ]
    },
    {
      "name": "USA",
      "cities": [
        {
          "name": "New York",
          "areas": [
            "Manhattan",
            "Brooklyn",
            "Queens"
          ]
        },
        {
          "name": "California",
          "areas": [
            "Los Angeles",
            "San Francisco",
            "San Diego"
          ]
        }
      ]
    }
  ]
};

<select>
  <option *ngFor="let country of jsonData.countries" [value]="country.name">{{ country.name }}</option>
</select>

<select>
  <option *ngFor="let city of jsonData.countries[selectedIndex]?.cities" [value]="city.name">{{ city.name }}</option>
</select>

<select>
  <option *ngFor="let area of jsonData.countries[selectedIndex]?.cities[selectedIndex2]?.areas" [value]="area">{{ area }}</option>
</select>

selectedIndex: number;
selectedIndex2: number;

onCountryChange(event) {
  this.selectedIndex = event.target.selectedIndex;
  this.selectedIndex2 = 0; // 重置第二个下拉框的索引
}

<select (change)="onCountryChange($event)">
  <option *ngFor="let country of jsonData.countries" [value]="country.name">{{ country.name }}</option>
</select>