级联操作(使用事件发射器)用于下拉角度 2

Question

我在一个以级联效果工作的表单上有几个下拉列表 - 第一个下拉列表控制要在第二个下拉列表中显示的值，依此类推。每个下拉列表的值来自异步数据服务。我正在使用角度事件发射器来发出事件并获取后续下拉列表的数据。有 5 个这样的相互依赖的下拉列表。

Cascade operation: 
Dropdown1 -> Dropdown2 -> Dropdown3 -> Dropdown4 -> Dropdown5
onChangeDropdown1(selectedValue) -> fillDropdown2 with selected value -> onChangeDropdown2(selectedValue) -> fillDropdown3 with selected value -> ... till dropdown 5

所选值将保留在状态对象中：

dropDownSelection = { 
Dropdown1Val: "val1",
Dropdown2Val: "val2",
Dropdown3Val: "val3",
Dropdown5Val: "val4",
Dropdown5Val: "val5",
}

问题是当表单在编辑模式下打开时，我们需要按顺序触发所有事件，并在下拉列表中使用选定的/存储值获取适当的值(再次来自异步数据服务)。

当保存所有下拉列表的选定值的选择对象/状态分配给表单对象/模型时，将触发更改事件，但下拉列表为空且未被选中(因为它们还没有值)，事件应触发的顺序是同时的，而不是顺序/级联的，也是因为， 数据服务是异步的，下拉列表未在正确的时间填充。

相关标记 -

<div class="form-group form-inline">
<select [(ngModel)]="dropDownSelection.Dropdown1Val" class="form-control" id="Dropdown1" (ngModelChange)="onChangeDropdown1()" name="Dropdown1">
<option *ngFor="let _val of _dd1"
[ngValue]="_val">
{{_val}}
</option>
</select>
</div>
<div class="form-group form-inline">
<select [(ngModel)]="dropDownSelection.Dropdown2Val" class="form-control" id="Dropdown2" (ngModelChange)="onChangeDropdown2()" name="Dropdown2">
<option *ngFor="let _val of _dd2"
[ngValue]="_val">
{{_val}}
</option>
</select>
</div>
<!-- dropdowns 3, 4 here -->
<div class="form-group form-inline">
<select [(ngModel)]="dropDownSelection.Dropdown5Val" class="form-control" id="Dropdown5" name="Dropdown5">
<option *ngFor="let _val of _dd5"
[ngValue]="_val">
{{_val}}
</option>
</select>
</div>

Answer 1

在选择下拉列表以调用顺序服务时，可以在 HTML 中使用ngModelChange，而不是同时调用所有服务。