我想从文件库中过滤数据。那是行不通的。那么,有谁知道如何通过技能和邮政编码来更改过滤器的代码?
错误是:
Error: Uncaught (in promise): Error: InvalidPipeArgument: 'false,[object Object],[object Object]' for pipe 'AsyncPipe'
Error: InvalidPipeArgument: 'false,[object Object],[object Object]' for pipe 'AsyncPipe'
at invalidPipeArgumentError (http://localhost:8100/build/vendor.js:49480:12)
at AsyncPipe._selectStrategy (http://localhost:8100/build/vendor.js:50929:15)
at AsyncPipe._subscribe (http://localhost:8100/build/vendor.js:50911:31)
at AsyncPipe.transform (http://localhost:8100/build/vendor.js:50885:22)
at Object.eval [as updateDirectives] (ng:///AppModule/SearchPage.ngfactory.js:237:77)
at Object.debugUpdateDirectives [as updateDirectives] (http://localhost:8100/build/vendor.js:15071:21)
at checkAndUpdateView (http://localhost:8100/build/vendor.js:14218:14)
at callViewAction (http://localhost:8100/build/vendor.js:14569:21)
at execComponentViewsAction (http://localhost:8100/build/vendor.js:14501:13)
at checkAndUpdateView (http://localhost:8100/build/vendor.js:14224:5)
at c (http://localhost:8100/build/polyfills.js:3:19752)
at Object.reject (http://localhost:8100/build/polyfills.js:3:19174)
at NavControllerBase._fireError (http://localhost:8100/build/vendor.js:54427:16)
at NavControllerBase._failed (http://localhost:8100/build/vendor.js:54420:14)
at http://localhost:8100/build/vendor.js:54467:59
at t.invoke (http://localhost:8100/build/polyfills.js:3:14976)
at Object.onInvoke (http://localhost:8100/build/vendor.js:5134:33)
at t.invoke (http://localhost:8100/build/polyfills.js:3:14916)
at r.run (http://localhost:8100/build/polyfills.js:3:10143)
at http://localhost:8100/build/polyfills.js:3:20242
Search.ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AngularFireDatabase } from 'angularfire2/database';
import * as _ from 'lodash';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
import { Worker } from "../../models/worker/worker.model";
import { WorkerListService } from '../../services/worker-list/worker-list.service';
@Component({
selector: 'page-search',
templateUrl: 'search.html'
})
export class SearchPage {
WorkerList$: Observable<Worker[]>;
filteredworkers: Observable<Worker[]>;
filters = {}
skill: string;
postcode: number;
constructor(public navCtrl: NavController, public afd:AngularFireDatabase,private worker1: WorkerListService) {
this.WorkerList$ = this.worker1
.getWorkerList() //DB list
.snapshotChanges() //key and value
.map(
changes =>{
return changes.map(c => ({
key: c.payload.key,
...c.payload.val(),
}));
this.applyFilters()
});
}
private applyFilters() {
this.filteredworkers = _.filter(this.WorkerList$, _.conforms(this.filters) )
}
filterGreaterThan(property: string, rule: number) {
this.filters[property] = val => val > rule
this.applyFilters()
}
filterGreaterThan1(property: string, rule: string) {
this.filters[property] = val => val > rule
this.applyFilters()
}
removeFilter(property: string) {
delete this.filters[property]
this[property] = null
this.applyFilters()
}
}
Search.html
<ion-item>
<ion-label>
Postcode:
</ion-label>
<ion-input type="number" [(ngModel)]="postcode" (change)="filterGreaterThan('postcode', postcode)" placeholder="example: 2000"></ion-input>
</ion-item>
<button ion-button block>
Filter Remove
</button>
<ion-item>
<ion-label>
Skill:
</ion-label>
<ion-input type="string" [(ngModel)]="skill" (change)="filterGreaterThan1('skill', skill)" placeholder="example: computer"></ion-input>
</ion-item>
<button ion-button block>
Filter Remove
</button>
<ion-card *ngFor="let worker of filteredworkers | async">
<ion-item>
<h2>{{worker.name}}</h2>
</ion-item>
<ion-card-content>
<h2>Skill: {{worker.skill}}</h2>
<h2>Postcode: {{worker.postcode}}</h2>
<h2>Phone: {{worker.phone}}</h2>
<h2>Email: {{worker.email}}</h2>
</ion-card-content>