Question

我试图在这里重现一个项目的示例，我必须在不使用页面的情况下显示一个大的字符串名称列表，只是一个滚动。

由于显示过滤器速度的数量很多，因此当您添加一些字符串过滤器并开始删除该过滤器时，光标不会在过滤器中立即平滑移动，因此对于用户来说，它不是很敏感。

字符串名称可以变化很多，从3,4,5个字符到大约32个字符

该列表可以增加到大约10000个项目（搜索项目的结果）

到目前为止，我有这个演示：

https://stackblitz.com/edit/angular-xg6dqt?file=app%2Fapp.component.ts

我已经生成了（伪）随机名称。

我尝试使用(keyup)="debounce(applyFilter(),700)"去除对该函数的调用但它没有帮助，这意味着当我尝试删除或向过滤字符串添加内容时，光标停止写入时间直到显示结果。

在这个例子中它更快，但在我的应用程序中，因为我有很多组件和服务，它看起来比这个例子慢。

有没有办法让这个过滤器更具响应性？

app.component.html

<hello name="{{ name }}"></hello>
<p>
  Angular filter for big array
</p>

<input type="text" placeholder="filtering string here" [(ngModel)]="filterString" (keyup)="applyFilter()"/>

<h2>Array</h2>

<table style="max-height:400px;height:400px;overflow-y:scroll;">
  <tbody style="display:block;max-height:400px;height:400px;width:400px;overflow-y:scroll;">
    <tr *ngFor="let item of filteredItems">
      {{item}}
    </tr>
  </tbody>
</table>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 5';

  items:string[]=new Array();
  filteredItems:string[]=new Array();

  filterString:string;

  ngOnInit(){
    for(let i=0;i<10000; ++i)
      this.items.push(Math.random().toString(36).substr(2, 24)+Math.random().toString(36).substr(2, 24)+"1234567899*xxx");
    this.filteredItems=JSON.parse(JSON.stringify(this.items));
  }

  applyFilter(){
    this.filteredItems= this.items.filter((item) => {
      return item.toLocaleLowerCase().indexOf(this.filterString) > -1;
    });
  }
}

注意：

由于变化检测在角度方面的工作方式，我已经删除了角度管道的使用，因为它的速度更慢，所以我决定直接在组件TS代码中过滤我的数组。

使用过滤器时加速ng的方法吗？

0 个答案: