如何在 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

Answer 2

在您的情况下，您似乎正在使用 Observables (Rxjs)，而这些不是数组，因此您不能将 .filter 等数组方法直接与 Observables 一起使用。您可以使用 Observable 的运算符“filter”实现过滤器：https://www.learnrxjs.io/operators/filtering/filter.html

或者您可以在构造函数中订阅您的服务（返回 Observable），然后使用数组使您的模板工作（因此您不需要模板中的异步管道）。

尝试在您的 TS 中执行以下操作：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Observable } from "rxjs";
import { ResProject,ComProject,OffiProject } from "../../models/project.model";
import { AddProjectService } from "../../services/addproject.service";

@IonicPage()
@Component({
  selector: 'page-project',
  templateUrl: 'project.html',
})
export class ProjectPage {

  // holders of original unfiltered data:
  resProject : Observable <ResProject[]> ;
  comProject : Observable <ComProject[]>;

  // holders of data for filtered lists, initially set to empty array:
  filteredResProject: any[] = [];
  filteredComProject: any[] = [];

  constructor(public navCtrl: NavController, 
              public navParams: NavParams,
              public projectService : AddProjectService,
              ) 
    { 
      this.initializeItems();
    }

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

  initializeItems() {
    this.resProject = this.projectService.getResProjectList()
    .snapshotChanges()
    .map(
      changes => {
        return changes.map(c => ({
          key : c.payload.key, ...c.payload.val()
        }))
      }

    )
  this.resProject.subscribe( res => {
    this.filteredResProject = res;
  })

  this.comProject = this.projectService.getComProjectList()
  .snapshotChanges()
  .map(
    changes => {
      return changes.map(c => ({
        key : c.payload.key, ...c.payload.val()
      }))
    }

  )
this.comProject.subscribe( res => {
  this.filteredComProject = res;
});
  }

}

在你的模板中你不应该再使用异步管道，因为你只渲染基于数组的数据：

<ion-header>
    <ion-navbar>
      <button ion-button menuToggle>
        <ion-icon name="menu"></ion-icon>
      </button>
    <ion-title>Project List</ion-title>
  </ion-navbar>
  <ion-toolbar>
    <ion-searchbar (ionInput)="filterItems($event)"></ion-searchbar>
  </ion-toolbar>
</ion-header>

<ion-content >
    <ion-list>
        <ion-list-header>
        Project List
        </ion-list-header>
        <ion-badge>Number Of Residential Project :{{ resProject.length }}</ion-badge>
        <ion-item *ngFor="let rp of filteredResProject" detail-push navPush="ViewProjectPage" [navParams]="{resProject:rp} ">
        {{rp.name}}
      </ion-item>
    </ion-list>
    <ion-list>
        <ion-badge color="danger">Number Of Commercial Project :{{ comProject.length }}</ion-badge>
        <ion-item *ngFor="let cp of filteredComProject" detail-push navPush="ViewComProPage" [navParams]="{comProject:cp}">
        {{cp.name}}
      </ion-item>
    </ion-list>
</ion-content>

这不是最好的代码设计，但根据您当前的代码，这应该可以工作。基本思想 - 你想从你的服务中获取完整的真实数据，并且在每次“初始化”时你只修改过滤列表。