gpt4 book ai didi

angular - 如何在 Angular 2 中编辑表单控件值时不发出事件

转载 作者:太空狗 更新时间:2023-10-29 17:16:47 25 4
gpt4 key购买 nike

我正在尝试使用 Angular2 和 Form Control 编写一个自动完成输入字段。

首先我决定按如下方式初始化我的表单控件:

term = new FormControl();

constructor(private _autocompleteService: AutocompleteService) {
this.term.valueChanges
.debounceTime(300)
.distinctUntilChanged()
.flatMap(search => this._autocompleteService.autocomplete(this.urlSearch, search))
.subscribe(
autocomplete => this.autocomplete = autocomplete,
error => console.log(error)
);
}

_autocompleteService 将搜索请求发送到服务器并返回一个字符串数组。

我的 html 模板看起来像这样。它在输入下方显示了一个建议列表,可以在其中选择每个元素。

<input type="text" [formControl]="term">
<ul>
<li *ngFor="let suggestion of autocomplete" (click)="selectChoice(suggestions)">{{ suggestion }}</li>
</ul>

这里是选择函数:

selectChoice(choice: string) {
this.autocomplete = []; // We clean the list of suggestions
this.term.setValue(choice); // We write the choice in the term to see it in the input
this.selected = resp;
}

这就是问题所在。当我从 term 编辑 value 时,它​​会发出一个事件并发送一个新的搜索请求,然后显示一个新的建议列表。

有没有办法阻止此事件的发生并仅更改输入字段中显示的值?

最佳答案

根据docs您可以执行以下操作:

selectChoice(choice: string) {
this.autocomplete = []; // We clean the list of suggestions
this.term.setValue(choice, { emitEvent: false }); // We write the choice in the term to see it in the input
this.selected = resp;
}

emitEvent: false 将阻止发出 valueChanges 事件。

If emitEvent is true, this change will cause a valueChanges event on the FormControl to be emitted. This defaults to true (as it falls through to updateValueAndValidity).

关于angular - 如何在 Angular 2 中编辑表单控件值时不发出事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39857486/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com