显示选择元素的选项依赖于另一个选择

Question

我有一个带@Input选项变量的选择下拉组件。

我想根据第一个

中选择的内容在该组件的另一个实例中显示选项如何实现这一点?

<select *ngIf="option=='city'" class="form-select border-blue" id="exampleFormControlSelect1">
<option selected>Select City</option>
<option *ngFor="let city of cities" value="{{city}}">{{city}}</option>
</select>

我当前的"解决方案"是添加一个选择标签作为一个新的元素在新的行，而我需要依赖的选择元素总是在页面上，等待第一次选择

<select *ngIf="selectedCity|async" class="form-select border-blue" id="exampleFormControlSelect1">
<option selected>Select district</option>
<option *ngFor="let dist of (districts|async)" value="{{dist}}">{{dist}}</option>
</select>

https://stackblitz.com/edit/angular-ivy-5qthim?file=src/app/select-one/select.component.html

Answer 1

我的解决方案很简单，

1. 我将选定的城市传递给父组件，
2. 通过函数得到了这个特定城市的区域数组
3. 从父组件传递区域数组到我的select(子)组件。

我的错误是我试图从select组件本身实现功能。

如果有方法可以使用异步管道，请分享