Angular 2过滤器/搜索列表

发布时间：2020-12-17 08:03:06 所属栏目：安全来源：网络整理

导读：我正在寻找角度2的方法来做 this. 我只是有一个项目列表,我想做一个输入,工作是过滤列表. md-input placeholder="Item name..." [(ngModel)]="name"/md-inputdiv *ngFor="let item of items"{{item.name}}/div 在Angular 2中这样做的实际方法是什么？这需要

我正在寻找角度2的方法来做 this.

我只是有一个项目列表,我想做一个输入,工作是过滤列表.

<md-input placeholder="Item name..." [(ngModel)]="name"></md-input>

<div *ngFor="let item of items">
{{item.name}}
</div>

在Angular 2中这样做的实际方法是什么？这需要管道吗？

您必须通过将侦听器保持在输入事件上,根据每次输入的更改手动筛选结果.在进行手动过滤时,请确保您应该保留两个变量副本,其中一个是原始集合副本&第二个是filteredCollection副本.这种方式的优势可以节省您在更改检测周期中的不必要的过滤.您可能会看到更多代码,但这会更加性能友好.

标记 – HTML模板

<md-input #myInput placeholder="Item name..." [(ngModel)]="name" (input)="filterItem(myInput.value)"></md-input>

<div *ngFor="let item of filteredItems">
   {{item.name}}
</div>

码

assignCopy(){|
   this.filteredItems = Object.assign([],this.items);
}
filterItem(value){
   if(!value) this.assignCopy(); //when nothing has typed
   this.filteredItems = Object.assign([],this.items).filter(
      item => item.name.toLowerCase().indexOf(value.toLowerCase()) > -1
   )
}
this.assignCopy();//when you fetch collection from server.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!