如何制作搜索栏过滤项目?

Question

所以我正在尝试让搜索栏过滤掉项目(项目1，项目2和项目3(

这是我当前的代码，在搜索栏中输入内容没有任何作用。

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
/**
* Generated class for the ContactusPage page.
*
* See http://ionicframework.com/docs/components/#navigation for more info
* on Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-contactus',
templateUrl: 'contactus.html',
})
export class ContactusPage {
items: Array<string>;
ngOnInit() {
this.setItems();
}
setItems() {
this.items = [ 
'item 1',
'item 2',
'item 3'
];
}
filterItems(ev: any) {
this.setItems();
let val = ev.value;
if (val && val.trim() !== '') {
this.items = this.items.filter(function(item) {
return item.toLowerCase().includes(val.toLowerCase());
});
}
}
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad ContactusPage');
}
}

请帮助我了解我错过了过滤器项目方法的内容。我对离子很陌生，所以我不太确定。这是我从离子存储库中得到的。

<ion-searchbar placeholder="Filter Items with Cancel" showCancelButton color="danger" (ionInput)="filterItems($event)"></ion-searchbar>

Answer 1

我认为这是因为您绑定了(ionInput)事件并错误地分配了val

您应该改为绑定到(input)(您可以在文档中查看支持的事件列表(

模板

<ion-searchbar placeholder="Filter Items with Cancel" 
showCancelButton color="danger" 
(input)="filterItems($event)">
</ion-searchbar>

$event没有value属性，但我认为您正在尝试使用srcElement.value- 您可以通过在方法开始时将其记录到控制台来检查参数，以便将来对其进行调试。

元件

filterItems(ev: any) {
console.log(ev);
let val = ev.srcElement.value;
if (val && val.trim() !== '') {
this.items = this.items.filter((item) => {
return item.toLowerCase().includes(val.toLowerCase());
});
}
}

您可以在 plunker 上看到一个实时示例

编辑

虽然这应该可以解决您的问题，但我建议您改用JGFMK评论中提到的这篇博文中描述的方法

这使用[(ngModel)]="searchTerm"来绑定数据和带有去抖动的可观察对象：searchControl.valueChanges.debounceTime进行过滤，但不是像我发布的示例那样针对每次按键。