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

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

　　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做了什么？

     

 

         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的列表。

 

 

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

转载于:https://www.cnblogs.com/Linyb/p/5433919.html