根据 Angular 14 上的另一个选择下拉菜单填充选择下拉菜单答案

【问题标题】：Populate a select dropdown based on another select dropdown on Angular 14根据 Angular 14 上的另一个选择下拉菜单填充选择下拉菜单
【发布时间】：2022-11-17 02:07:53
【问题描述】：

所以我试图创建一个带有 2 个选择下拉列表的简单表单。
一个选择的国家。
一个选择他们的州。
the idea is to display a list of countries and when one country is selected, the second select gets populated with its main states. （和 obv 维护数据绑定）

我尝试为我成功填充第一个选择下拉列表的国家/地区使用一个简单的字符串列表（尽管我无法为选择 idk 为什么做一个占位符）
之后，我声明了第二个包含每个国家/地区城市的对象列表，然后执行过滤功能以仅过滤出与所选国家/地区匹配的州列表，但我无法用它填充第二个选择下拉列表。这是一个解释得更好的 stackblitz 演示。

Stackblitz

【问题讨论】：

标签： angular select dropdown auto-populate

【解决方案1】：

您非常接近，当第一个下拉列表选择了一个值时，您只需要一个适当的过滤器功能。使用 ngModelChange 之类的事件，您可以轻松获取所选值并执行过滤器以查找状态列表。

零件：

onCountrySelect(selectedCountry) {
    this.filteredStates = this.states.find(item => item.country === selectedCountry).stateList;
  }

HTML:

<form>
  <select name="countryName" [(ngModel)]="selectedCountry" (ngModelChange)="onCountrySelect($event)">
    <option *ngFor="let c of countries" value="{{ c }}">{{ c }}</option>
  </select>

  <select name="states" id="states" [(ngModel)]="selectedState">
    <option *ngFor="let s of filteredStates" value="{{ s }}">{{ s }}</option>
  </select>
</form>

Stackblitz demo

【讨论】：

最好使用 find 而不是 filter :)
刚刚实现了带有过滤器功能的解决方案，它就像一个魅力（我刚刚发现 ngModelChange ）非常感谢。如果可能的话，您是否可以提供具有查找功能的解决方案
答案已更新！感谢大家的反馈:)