ngFor 使用 trackby 按文本过滤答案

【问题标题】：ngFor filter by text using trackbyngFor 使用 trackby 按文本过滤
【发布时间】：2021-03-12 20:56:43
【问题描述】：

我正在开发一个 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”可以优化结果。问题是我不知道如何正确实现它，以及这是否可以帮助我更快地过滤元素。

如何实现快速过滤器？

【问题讨论】：

标签： angular typescript filter ngfor

【解决方案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';

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

  term$ = new Subject<string>();

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

【讨论】：