如何提高大型列表的角度搜索过滤器的性能

Question

在搜索栏中键入时，鼠标事件会在键入时暂停几秒钟，直到加载数据（似乎每个单击事件都会触发数据在搜索中加载）这发生在前几次键入时使用搜索过滤器管道）没有搜索管道它仍然很慢。请帮忙谢谢 请点击链接查看stackblitz示例：

https://ionic-6cbe9t.stackblitz.io

searchFilter(searchTerm){
  if(searchTerm != ''){
    searchTerm = searchTerm.toLowerCase();
  }

  if(!this.listFromArray){
    return Immutable.List();
 }

  if(!searchTerm){
    return this.listFromArray;
  }

  return  this.listFromArray.filter((address) => {
    return address.Company.toLowerCase().includes(searchTerm) ||
        address.Phone.toString().includes(searchTerm) ||
        address.Street.toLowerCase().includes(searchTerm) ||
        address.City.toLowerCase().includes(searchTerm)  ||
        address.Phone.includes(searchTerm);
  });
}

Answer 1

如何进行“debounceTime”搜索

你的组件.html

  <input #search (keyup)="searchTerm.next(search.value)">
  <div *ngIf="results"> 
    <!--slice is optional-->
    <div *ngFor="let item of results |slice:0:10">
         {{item.descripcion}}
    </div>
   </div>

在你的 component.ts 中

  //We defined three variables,
  items:any[];  //our items
  results:any[];  //Our items filtered
  searchTerm = new Subject<string>();  //A subject 

  search(terms: Observable<string>) {
    return terms.pipe(debounceTime(400),
      distinctUntilChanged(),
      switchMap(term => this.searchEntries(term)));
  }

  searchEntries(term) {
    //here we can put others conditions to term
    //like term.lenght>3, e.g.
    if (!term)
      return of(null);  //Notice we return an observable -using Observable.of
    term=term.toUpperCase();
    return of(     //Idem before. If we're ask about an observable
                   //Like httpClient.get, we not need "of" 
       this.items.filter(a=>a.searchProperty.indexOf(term)>=0)
    );
  }

  ngOnInit() {
    //we subscribe to get the items
    this.http.get("assets/items.json").subscribe((res:any[])=>{
         //we can do this.items=res ...
         //this.items=res;
         //...but better make a map and create a property "searchProperty"
         //so, our filtered can be over this property. notice
         //the map is executed only one time
         this.items=res.map(x=>{
           return {
                   ...x,
                   searchProperty:x.descriptcion.toUpperCase()
                         +x.texto.toUpperCase()
                         +x.comment.toUpperCase()
                   }
          });
         //then, we subscribe to "this.search"
        this.search(this.searchTerm)
          .subscribe(results => {
             this.results = results;   
        });
    });
}

注意：代码很大程度上来自https://alligator.io/angular/real-time-search-angular-rxjs/