显示带有选项的选择元素取决于另一个选择

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. 将分区数组从父组件传递到我的选择（子）组件。

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

如果有办法用异步管道做到这一点，请分享