Jquery 如何根据所选国家在下拉菜单上显示城市？角度4

我正在连接到一个web服务，以在两个下拉菜单中获取国家和城市，一个用于国家，一个用于城市，现在我希望选择第一个下拉菜单（国家），以打开特定国家的数组，仅显示与该国相关的城市，而不是所有城市，因此，我需要从web服务中提取位于所选国家/地区数组中的城市数组，有什么想法可以动态地执行吗？这是我可以与您分享的代码，我不能分享更多，因为它属于我的公司，但您可以为我编写正确的语法，并描述如何动态执行，我将执行其余操作：

<select name="city" class="rounded-inputs20 select-select col-md-3">
    <option value="Country" selected="selected">Country</option>
  <option *ngFor="let country of countries.data"  value="countries">{{country.name}}</option>
  </select>

  <select id="sel1" name="Country" class="rounded-inputs20 select-select col-md-3">
    <option value="City" selected="selected">City</option>
    <option *ngFor="let city of countries.data[0].cities" value="cities">        {{city.name}}</option>  

  </select>

国家
{{country.name}
城市
{{city.name}

---

如果有任何不符合cear的地方，请发表评论，我将向您提供更多说明。首先，您选择的元素的*ngFor是错误的。它应该是这样的（请注意，您可以将值从country.name更改为您希望从country对象获得的任何属性）：

---

因此，首先你要做的是改变：

在html中：

<select name="city" (change)="onSelect($event.target.value)" class="rounded-inputs20 select-select col-md-3">

现在您可以在城市上执行ngFor。城市：

<option *ngFor="let city of cities.cities" value="city"> 

如果没有选择国家，城市必须是一个空数组怎么办？是的，空数组。发布了一个答案希望它能帮助检查：@br.julien这太棒了，但我从web服务中提取数据，所以我需要根据国家确定将哪个数组放入城市部分，有什么想法吗？我想你的答案是对的，但是你能发布完整的代码吗？这是我能为你做的一切。我的意思是编辑是我能为你做的一切：P你应该能够复制粘贴它，它应该可以工作。在这个问题中，name=''是前后变化的，请记住这一点。

onCountryChange(country: string): void {
  // get cities based on country OR filter existing cities array
}

<select name="city" (change)="onSelect($event.target.value)" class="rounded-inputs20 select-select col-md-3">

private cities: any[] = [];

constructor(){}

private onSelect(_country: any){
      this.cities = this.countries.data.filter((country: any) =>
           country.name  === _country);

<option *ngFor="let city of cities.cities" value="city">