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

请注意，我使用的是模型名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)

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

对于HTML，这是我的代码：

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)

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

{{rp.name}

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

---

如何在我的

ion serchbar

或任何其他解决方案中筛选此响应项目列表？

您可以使用

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>

---

希望这对你有帮助。在您的例子中，您似乎正在使用Observable（Rxjs），而这些不是数组，因此您不能直接使用.filter etc数组方法。您可以使用Observable的运算符“filter”实现筛选器：

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

在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;
});
  }

}

从'@angular/core'导入{Component}；
从“离子角度”导入{IonicPage，NavController，NavParams}；
从“rxjs”导入{observeable}；
从“./../models/project.model”导入{ResProject，ComProject，officeproject}”；
从“../../services/addproject.service”导入{AddProjectService}”；
@IonicPage（）
@组成部分({
选择器：“页面项目”，
templateUrl:'project.html'，
})
导出类项目页面{
//原始未过滤数据的持有者：
项目：可观察；
综合项目：可观察；
//筛选列表的数据持有者，最初设置为空数组：
filteredResProject:any[]=[]；
FilteredCompProject:任意[]=[]；
构造函数（公共navCtrl:NavController，
公共导航参数：导航参数，
公共项目服务：AddProjectService，
) 
{ 
this.initializeItems（）；
}
过滤器项（事件）{
this.initializeItems（）；
const val=event.target.value；
如果（值和值修剪（）！=“”）{
this.filteredResProject=this.filteredResProject.filter（（项）=>{
返回（item.name.toLowerCase（）.indexOf（val.toLowerCase（））>-1）；
})
}
}
初始化项（）{
this.resProject=this.projectService.getResProjectList（）
.snapshotChanges（）
.地图(
变化=>{
返回changes.map（c=>({
key:c.payload.key，…c.payload.val（）
}))
}
)
this.resProject.subscribe（res=>{
this.filteredResProject=res；
})
this.comProject=this.projectService.getComProjectList（）
.snapshotChanges（）
.地图(
变化=>{
返回changes.map（c=>({
key:c.payload.key，…c.payload.val（）
}))
}
)
this.comProject.subscribe（res=>{
this.filteredComProject=res；
});
}
}

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

<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>

项目清单
项目清单
住宅项目数量：{{resProject.length}
{{rp.name}
商业项目数：{{comProject.length}
{{cp.name}

---

这不是最好的代码设计tbh，但基于您当前的代码，这应该是可行的。基本想法-您希望从服务中获得完整的真实数据，并且在每次“初始化”时，您只修改筛选列表。

感谢您的回复，我收到了此错误：类型“ResProject[]”上不存在Typescript错误属性“name”。src/pages/project/project.ts this.resProject=this.resProject.filter（（item）=>{return（item.name.toLowerCase（）.indexOf（val.toLowerCase（））>-1）；}）不工作也需要每个项目的所有值，如模型

导出接口resProject{key？：字符串；类型：字符串；名称：字符串；NBR单位：编号；NBR楼层：编号；}

我只是举一个例子说明如何实现它。根据您的要求重新安排代码是由您决定的。是的，我理解并感谢您的帮助和您的时间，但如果我像您告诉我的那样使用它，我无法从firebase获取数据，我会遇到以下错误：

类型“Observable”缺少类型“any[]的以下属性“：length、pop、push、concat和22更多。

我为您的问题给出了正确的答案。如果答案正确，请将其标记为正确答案，如果这是一个新错误，请在stackoverflow中将其作为一个单独的问题发布。您是否可以共享您拥有的完整代码。可以使用管道和筛选器运算符筛选可观测值。这是我的完整ts文件和html文件太棒了，我会插话告诉你我会怎么做谢谢你的时间请查看此链接它将帮助你非常感谢它的工作非常感谢你的帮助，我只是在HTMLCreat中添加了

（ionClear）=“initializeItems（）”

）还有一个很好的提示ionClear！