如何根据选定的国家 /地区在下拉菜单上显示城市?角4

Question

我正在连接到网络服务，以使2个下拉菜单中的国家和城市中的一个国家和一个城市的城市，现在我想选择第一个下拉菜单（国家/地区））为了打开特定国家的阵列以向与这个国家相关的城市，并不是所有的城市，所以我需要从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>

如果没有什么，只需发表评论，我将为您提供更多描述

Answer 1

首先，对于您的选择元素，*ngfor 是错误的。名称到您想要的任何属性从您的国家对象）：

<option *ngFor="let country of countries.data"  value="{{country.name}}">{{country.name}}</option>

要查看选择什么值，您可以将 onChange 方法添加到您的选择元素，因此您将拥有类似的东西：

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

，然后在您的 .ts 文件中，您可以根据所选国家调用另一个服务或过滤现有的城市列表。

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

Answer 2

，因此首先要进行更改：

在您的html中：

<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);

现在您可以在 cities.ities.cities 上进行NGFOR：

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