如何在搜索栏中输入内容时过滤对象

Question

我从后端获取一个用于搜索栏的数组

当然它工作正常，但问题是我无法根据搜索栏中的用户类型进行过滤

这是我的搜索栏 html

<ion-toolbar color="primary" >
      <ion-searchbar (ionInput)="getItems($event)" (ionCancel)="onCancel($event)" [showCancelButton]="false" ></ion-searchbar>

      <ion-list *ngIf="showList">
        <ion-item *ngFor="let item of items" (click)="searchBar(item)">
          {{ item.name }}
        </ion-item>
      </ion-list>
  </ion-toolbar>
</ion-header>

这是我的 .ts 文件

getItems(ev) {
    // Show the results
     this.showList = true;


    // Reset items back to all of the items
    this.initializeItems();

    // set val to the value of the searchbar
    let val = ev.target.value;

    // if the value is an empty string don't filter the items
    if (val && val.trim() != '') {
      this.items = this.items.filter((item) => {

        //return item.toLowerCase().indexOf(val.toLowerCase()) > -1;
        return item;
      })
    } else {
      // Hide the results
      this.showList = false;
    }
  }

  onCancel(ev) { 
    // Show the results
    this.showList = false;

    // Reset the field
    ev.target.value = '';
  }

Answer 1

您可以使用管道来实现：

@Pipe({
    name: 'filteritem'
})
export class FilterPipe implements PipeTransform{
  transform(items: any[], args: any[]): any {
        if(args !== undefined){        
          return items.filter(item => item.indexOf(args[0]) > -1);
        }
    }
}

然后您可以更改transform 的实现，以更改您希望根据输入值过滤数组的方式。

plunkr 的示例