基于Angular 14中的另一个选择下拉菜单填充一个选择下拉菜单

Question

所以我试图创建一个简单的形式与2选择下拉框。
一个选项表示国家。
一次选择它们的状态。
的想法是显示一个国家列表，当一个国家被选中时，第二个选择将填充它的主要州。(以及维护数据绑定)

我试图使用一个简单的字符串列表的国家我第一选择成功填充下拉(虽然我不能做一个占位符选择idk为什么)
后,我宣布第二个对象列表与每个国家的城市然后做一个过滤函数只过滤出的状态列表匹配选择的国家,但是我不能得到填充第二个选择下拉。下面是一个stackblitz演示，可以更好地解释。

Stackblitz

Answer 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演示