Angular 2 filtersearch 列表

发布于11月18日

我在寻找Angular 2的方法来做this.

我只是有一个项目列表，我想输入谁的工作是过滤列表.

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

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

在Angular 2中，实际的做法是什么？那需要管子吗？

推荐答案

您必须根据每次输入的变化手动筛选结果，方法是将侦听器保持在input个事件以上.在进行手动筛选时，请确保维护变量的两个副本，一个是原始集合副本&；第二个是filteredCollection份.这样做的好处是可以避免在变更检测周期中进行不必要的过滤.您可能会看到更多的代码，但这会对性能更友好.

Markup - HTML Template个

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

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

Code

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.