Question

我使用的示例代码（https://stackblitz.com/edit/angular-nue8pb-fwqdsc?file=app%2Fautocomplete-overview-example.ts）是我创建的，用于在加垫自动完成功能中突出显示搜索文本的管道。突出显示的部分工作正常，但是一旦我清除搜索，突出显示的部分仍然保留在下拉列表中。这不是预期的行为。我希望搜索清除后高亮显示消失。请帮我解决这个问题。

https://stackblitz.com/edit/angular-nue8pb-fwqdsc?file=app%2Fautocomplete-overview-example.ts

Answer 1

执行此操作-

.html 文件

<input matInput placeholder="State" aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl" (keyup)="onStateKeyup()">

.ts 文件

onStateKeyup() {
    this.toHighlight = this.stateCtrl.value;
}

Answer 2

您只需更改构造函数，我认为以下代码将为您提供帮助

 constructor() {
    this.stateCtrl = new FormControl();
    this.filteredStates = this.stateCtrl.valueChanges
      .pipe(
        startWith(''),
        map(state => this.filterStates(state))
      );
  }

  filterStates(name: string) {
    this.toHighlight = name;
    return this.states.filter(state =>
      state.name.toLowerCase().indexOf(name.toLowerCase()) === 0);
  }

Demo

清除搜索文本后，突出显示管道不会消失

2 个答案: