ionic 2 起航 控件的使用 客户列表场景(三)

时间：2021-06-22 17:36:06

　　我们来看看客户列表的搜索控件是怎么工作的吧。

　　1.打开customer.html

<ion-content>

  <ion-searchbar

   [(ngModel)]="searchQuery"

   (input)="getItems($event)"

    placeholder="客户名称或客户曾用名"></ion-searchbar>

2.ion-searchbar 就是我们的主角。下面有三个属性

[(ngModel)]="searchQuery"   ，angular 2的一个双向绑定，跟后台customerPage类的的searchQuery对应着

　　　(input)="getItems($event)"    （input）是一个事件，就是输入的时候触发后台一个getItems（）的方法。$event事件的参数

　　　placeholder="客户名称或客户曾用名",这里就是高大上的水印文字啦。

ok，我们再看看后台customer.ts做了什么？

ionic 2 起航 控件的使用 客户列表场景(三)

1.searchQuer:string=''  ,这里是CustomerPage的一个属性。:string 类型是string型的

2.getItems(searchbar),这里是一个方法，每当输入的时候便会触发

　　　3.    this.items = this.items.filter((v) => {
     　　　　　　 if (v.toLowerCase().indexOf(q.toLowerCase()) > -1) {
       　　　　　　 return true;
     　　　　　　 }
     　　　　　　　　 return false;
   　　　　　 })

这里就是触发后，进行搜索过来items的列表。

下一章，我会继续介绍列表的刷新事件和下拉加速数据事件，欢迎持续关注

相关文章