ionic-framework - 我想过滤列表 angularfire2。那不工作

Question

我想从文件库中过滤数据。那是行不通的。那么有谁知道如何通过技能和邮政编码更改过滤器的代码？

错误是：

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

搜索.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()
        }
      }

搜索.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>

标签： ionic-frameworkangularfire2