Question

我在一个有级联效果的表单上有几个下拉列表 - 第一个下拉列表控制要在第二个下拉列表中显示的值，依此类推。每个下拉列表的值来自异步数据服务。我正在使用Angular EventEmitter发出事件并获取后续下拉列表的数据。有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 。

下拉角2的级联操作（使用EventEmitters）

1 个答案: