请我使用的是型号名称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的这个名单?
你的情况,你似乎可以用可观测量(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但根据当前的代码应该工作。基本思想 - 你想从你的服务,并在每个“初始化”只修改过滤列表中获取全部真相资料。
您可以使用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