小编ben*_*d-g的帖子

我正在尝试使用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;
}

这是问题所在.当我编辑术语的值时,它会发出一个事件并发送一个新的搜索请求,显示一个新的建议列表.

有没有办法防止这种事件发生,只是改变输入中显示的值？

语境

我正在yarn-workspace和typescript.

考虑以下项目结构：

project/
|- package.json
|- packages/
| |- common/
| | |- build/
| | | `- src/
| | |  |- myFile.d.ts
| | |  `- myFile.js
| | |- package.json
| | `- src/
| |  | `- myFile.ts
| |  `- tsconfig.json
| `- app/
|   |- package.json
|   |- src/
|   | `- index.ts
|   `- tsconfig.json
`- yarn.lock

project/
|- package.json
|- packages/
| |- common/
| | |- …