Question

所以我试图让搜索栏过滤出项目（item1，item2和item3）

这是我当前的代码，在搜索栏中输入内容无效。

    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');
  }

}

请帮我看看我错过了filterItems方法的内容。我对离子很新，所以我不太确定。这是我从Ionic存储库获得的。

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

Answer 1

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

您应该绑定到(input)（您可以看到支持的事件列表in the documentation）

<强>模板

<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());
    });
  }
}

您可以看到这个有效的here on plunker

的实例

修改

虽然应解决您的问题，但我建议您使用this blog post中提到的JGFMKs comment中描述的方法

这使用[(ngModel)]="searchTerm"来绑定数据，使用带有去抖动的Observable：searchControl.valueChanges.debounceTime进行过滤，但不是按照我发布的示例中的每次按键操作。

如何制作搜索栏过滤条目？

1 个答案: