如何搜索数组项中离子3?

问题描述 投票:0回答:2

请我使用的是型号名称ResProject和可变resProject:可观察;

这是我的代码:

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>

请注意,我从火力得到Resproject的数据。

我怎么能在我的ion-serchbar或任何其他解决方案筛选ResProject的这个名单?

javascript firebase ionic3 observable
2个回答
0
投票

你的情况,你似乎可以用可观测量(Rxjs),而这些不是数组,因此你不能用观测量直接使用.filter等阵列的方法。您可以使用可观察的运营商“过滤器”实现过滤器:https://www.learnrxjs.io/operators/filtering/filter.html

或者,你可以订阅你的服务(即返回可观察)在构造函数中,然后用您的模板的工作阵列(因此哟不会需要异步管的模板)。

尽量做到以下几点在你的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>

这是不是最好的代码设计TBH但根据当前的代码应该工作。基本思想 - 你想从你的服务,并在每个“初始化”只修改过滤列表中获取全部真相资料。


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

© www.soinside.com 2019 - 2024. All rights reserved.