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

Question

我正在尝试使用 Angular2 和表单控件编写一个自动完成输入字段。

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

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` 时，它会发出一个事件并发送一个新的搜索请求，然后显示一个新的建议列表。

有没有办法防止此事件发射并仅更改输入字段中显示的值？

Answer 1

根据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 事件。

如果 emitEvent 为 true，此更改将导致 FormControl 上的 valueChanges 事件被发出。这默认为 true（因为它属于 updateValueAndValidity）。