javascript - 如何在 Ionic 3 中搜索数组项？

Question

拜托，我使用的是模型名称 ResProject 和变量 resProject : Observable ；

这是我的代码:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Observable } from "rxjs";    

@IonicPage()
@Component({
  selector: 'page-project',
  templateUrl: 'project.html',
})
export class ProjectPage {
  resProject : Observable <ResProject[]> ;
  constructor(public navCtrl: NavController, 
              public navParams: NavParams)

对于 ResProject 的模型是这样的:

export interface ResProject {
    key?: string;
    type : string ;
    name : string; 
    nbrUnit : number ; 
    nbrFloor : number ;
}

对于 HTML，这是我的代码:

   <ion-item *ngFor="let rp of resProject  | async" detail-push navPush="ViewProjectPage" [navParams]="{resProject:rp} "  >
    {{rp.name}}
  </ion-item>

请注意，我从 firebase 获取 Resproject 的数据。

如何在我的 ion-serchbar 或任何其他解决方案中过滤此 ResProject 列表？

Answer 1

您可以使用 filter 方法来过滤数组项，如下所示。

home.html

<ion-content padding>
<ion-searchbar (ionInput)="filterItems($event)"></ion-searchbar>
<ion-list>
  <ion-item *ngFor="let item of resProject">
    {{ item.name }}
  </ion-item>
</ion-list>
</ion-content>

HomePage.ts

export class HomePage {

  resProject: any[];

  constructor() {

   this.initializeItems();
  }

  filterItems(event) {

    this.initializeItems();
    const val = event.target.value;
    if (val && val.trim() != '') {
      this.resProject = this.resProject.filter((item: ResProject) => {
        return (item.name.toLowerCase().indexOf(val.toLowerCase()) > -1);
      })
    }
  }

  initializeItems() {
    this.resProject = [
      { name: "Andrew" },
      { name: "Micheal" }, 
      { name: "Bernad" },
      { name: "Charles" }, 
      { name: "David" }];
  }
}

export interface ResProject {
    name : string; 
}

希望对您有所帮助。查找工作演示 here