在Angular中，我们可以通过监听键盘事件来搜索列表中的项。但是，有时在keydown事件中搜索似乎根本无法工作。这可能是因为事件在按下按键后立即触发，但搜索仍然在未来的tick中进行。因此，我们需要等待搜索完成后再更新视图。

为了解决这个问题，我们可以使用RxJS的debounceTime操作符来暂停keydown事件的处理，直到搜索完成并更新。以下是一个示例代码：

template:

• {{item.name}}

component:

import { Component, OnInit } from '@angular/core'; import { FormControl } from '@angular/forms'; import { debounceTime } from 'rxjs/operators';

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit{ searchInput: string; items = [ { name: 'Apple' }, { name: 'Banana' }, { name: 'Orange' }, { name: 'Mango' } ];

ngOnInit() { // Create new control for search input const searchControl = new FormControl();

// Subscribe to value changes of search control
searchControl.valueChanges.pipe(
  debounceTime(300) // Wait for 300ms after last event before continuing
).subscribe(value => {
  this.searchInput = value;
});

}

onKeyPressed(event: KeyboardEvent) { // Call preventDefault to avoid default behavior (e.g. arrow keys changing input position) event.preventDefault(); event.stopPropagation(); } }

在上面的代码中，我们创建了一个FormControl，并使用该控件的值变化来订阅搜索输入。我们还使用debounceTime操作符来确定什么时候搜索完成。在onKeyPressed方法中，我们使用preventDefault和stopPropagation方法来避免按键事件中的默认行为。