Angulartypeaheaddebouncetimerequest
创始人
2024-10-29 20:01:04
0

在Angular中使用debounceTime对typeahead搜索输入进行节流,减少请求次数。

在HTML模板中,通过ngbTypeahead指令绑定搜索输入,并使用debounceTime方法对搜索输入进行节流:


在组件中,定义搜索函数search并在其中使用debounceTime方法:

import { Component } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  searchTerm: string;
  searchTerms = new Subject();

  search = (text$: Observable) => {
    return text$.pipe(
      debounceTime(200),
      distinctUntilChanged(),
      switchMap(term => this.searchTerms(term))
    );
  }

  constructor() {
    this.searchTerms.pipe(
      debounceTime(200),
      distinctUntilChanged(),
      switchMap(term => this.search(term))
    ).subscribe(results => {
      console.log(results);
    });
  }

  search(term: string): Observable {
    // place your http request here
    return of([]);
  }

  formatter(result) {
    // place your formatter here
    return result;
  }
}

此方法使用rxjs的Subject及相应的操作符来对输入进行节流和去重,最终返回一个Observable来获取搜索结果。你可以在search函数中进行实际的搜索请求,也可以使用rxjs的of函数来返回一个静态的结果集。示例代码中的formatter函数用于对搜索结果进行格式化,你可以根据实际情况进行修改。

相关内容

热门资讯

5分钟课程!来趣广西友玩脚本辅... 5分钟课程!来趣广西友玩脚本辅助,潘潘讲故事辅助器,必赢教程(竟然有挂)-哔哩哔哩1、下载好来趣广西...
2分钟要领!微信边锋辅助软件,... 2分钟要领!微信边锋辅助软件,胡乐辅助脚本,透明教程(真的有挂)-哔哩哔哩微信边锋辅助软件辅助器中分...
第5分钟办法!超圣大厅黑科技,... 第5分钟办法!超圣大厅黑科技,hhpoker免费辅助器,细节方法(有挂细节)-哔哩哔哩运hhpoke...
两分钟妙招!微信三哥玩辅助器,... 两分钟妙招!微信三哥玩辅助器,牵手辅助神器下载,技巧教程(今日头条)-哔哩哔哩牵手辅助神器下载是一种...
第六分钟经验!神途游戏辅助软件... 第六分钟经验!神途游戏辅助软件,决战卡五星辅助修改器,教你教程(有挂方针)-哔哩哔哩1、实时决战卡五...
第十分钟机巧!新超凡大厅怎么开... 第十分钟机巧!新超凡大厅怎么开挂,葫芦娃辅助修改器下载,解密教程(有人有挂)-哔哩哔哩葫芦娃辅助修改...
5分钟练习!南丰数刀脚本,we... 5分钟练习!南丰数刀脚本,wepoker辅助器是真的吗,2025新版技巧(有挂技术)-哔哩哔哩1、w...
第1分钟经验!凑一桌游戏辅助软... 第1分钟经验!凑一桌游戏辅助软件,山西扣点免费辅助下载,AI教程(有挂讲解)-哔哩哔哩1、每一步都需...
第4分钟窍门!游戏茶苑辅助器,... 第4分钟窍门!游戏茶苑辅助器,指尖四川小程序辅助,力荐教程(有挂存在)-哔哩哔哩1、在指尖四川小程序...
4分钟经验!玉海楼辅助器,浙江... 4分钟经验!玉海楼辅助器,浙江宝宝游戏辅助工具,分享教程(有挂存在)-哔哩哔哩1、操作简单,无需注册...