ngFor 使用 trackby 按文本过滤

Question

我正在开发一个 angular 4 应用程序，我有一大堆对象（比如 200 行）因此，我放置了一个搜索输入，而 ngFor 与一个管道相关，该管道根据您在输入中写入的内容按名称进行过滤。像这样

<input type="text" [(ngModel)]="searchtext" placeholder="Search">
<div *ngFor="let m of (devices | filterEquipments : searchtext)">{{ m.name }}</div>

问题出在我开始打字的时候。显然在 html 中呈现内容时过滤非常慢。因此，在研究解决方案时，我发现通过在“ngFor”中使用“trackBy”可以优化结果。问题是我不知道如何正确地实现它，以及这是否可以帮助我更快地过滤元素。

如何实现快速过滤器？

Answer 1

也许可以尝试增加一些延迟

<input type="text" [value]="item.task_name"(keyup)="term$.next($event.target.value)">

import ......

import {Subject} from 'rxjs/Subject';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/switchMap';

@组件{( ... )} 导出 class YourComponent {

  term$ = new Subject<string>();

  constructor() {
   this.term$
     .debounceTime(1000)
     .distinctUntilChanged()
     .switchMap(term => /*do something*/);
  }
}

ngFor 使用 trackby 按文本过滤

ngFor filter by text using trackby

angular

typescript

filter

ngfor