延迟输入更改 Angular

Question

您好，我的应用程序中有一个输入，它会在每次笔画时触发，但我想要一些延迟，例如。1 秒后触发我的搜索功能，以便它不会发送多个请求

我的 HTML 代码

<input id="musicsearch"  (input)="onSearchChange($event.target.value)"  ng-model-options="{debounce:1000}" class="form-control mr-sm-2"style="width: 100%;"type="text"placeholder="Search">

component.ts（处理变化）

 onSearchChange(searchValue : string ) {  

    this.router.navigate(['/search', searchValue])


  }

我是 angular 新手我找不到我的问题的解决方案，我想在用户停止输入输入时触发它

Answer 1

  private modelChanged: Subject<string> = new Subject<string>();
  private subscription: Subscription;
  debounceTime = 500;

  ngOnInit(): void {
    this.subscription = this.modelChanged
      .pipe(
        debounceTime(this.debounceTime),
      )
      .subscribe(() => {
        this.functionToBeCalled();
      });
  }
  functionToBeCalled() {
    console.log('Called After 500ms');
  }

  inputChanged() {
    this.modelChanged.next("Akshay Is Awesome")
  }

  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }

html文件 <input type="text" (keydown)="inputChanged()">

试试这个 稍后谢谢我:)

Answer 2

在 Html 文件上

<input [(ngModel)]="searchTxt" type="text" (keyup)="triggerSearch()">

在 ts 文件上

searchTxt:string = '';
timeout = null;

triggerSearch() {
    clearTimeout(this.timeout);
    this.timeout = setTimeout(() => {
      this.onSearchChange(this.searchTxt);
    }, 1000);
  }