ionic-Angular下拉查询连选后

Question

我正在实现一个下拉列表，因为我在表单的一列中键入内容。我在此字段上有一个可观察的运行来查找更改并查询数据库中的可用项目。一切正常，但如果我 select 列出的下拉列表中的项目，它仍然会触发对该 selected 项目的查询，因为 valueChanges 和 distinctUntilChanged() 都将 return 为真。

例如，如果我输入 java，下拉列表 java 和 javascript 并且如果我 select javascript 来自列表，它会继续并查询数据库 java脚本。

这听起来很傻，但如何避免这种情况，我是 UI 方面的新手，感谢任何帮助。

this.myForm.controls['myDropDownDesc'].valueChanges
    .debounceTime(500)
            .distinctUntilChanged()
            .subscribe(
            (newValue) => {
                this.myMethodCallingHttpGetToGetDropDownValues(newValue);
            });

<ion-item>
<ion-label floating>My Drop DOWN field</ion-label>
<ion-input formControlName="myDropDownDesc"  value={{myObject?.myDropDownDescription}}>
</ion-input>
</ion-item>

Answer 1

您可以在从下拉列表中选择选项时使用 emitEvent:false 设置表单控件值，这样它就不会触发值更改事件。

列表的Onselect 或Onchange 事件你可以调用下面几行的函数。

this.myForm.controls['myDropDownDesc'].patchValue(selectedDropDownValue, {emitEvent:false});

ionic-Angular下拉查询连选后

Ionic-Angular drop-down querying even after the selection

typescript

ionic-framework

ionic2

angular