如何根据所选国家/地区在下拉菜单中显示城市？角4

Question

我正在连接到一个网络服务以获得国家和城市的2个下拉菜单，一个用于国家，一个用于城市，现在我想要选择第一个下拉菜单（国家/地区）来打开特定国家/地区的数组以显示与这个国家相关的城市不仅仅是所有城市，所以我需要从网络服务中拉出所选国家/地区阵列中的城市数组，任何想法如何动态地进行？这里是我可以与你分享的代码，我不能分享更多，因为它属于我的公司，但你可以给我写正确的语法，并描述如何动态地做，我会做其余的事情：

<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是错误的。它应该是这样的（注意你可以将country.name中的值更改为你想要的国家/地区对象）：

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

要查看选择了什么值，您可以将onChange方法添加到select元素中，这样您就可以：

<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.cities上做一个ngFor：

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