我正在寻找角度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.
