如何使用不带ngModel的angular2管道过滤器,而是使用简单的字符串

时间:2017-01-21 05:33:47

标签: javascript angular ionic-framework

我已经制作了一个角度可重用的管道,用于过滤当前使用输入的列表:text和ngModel ngModel标记

<input type="text" name="filterText" [(ngModel)]="filterText">
<ul>
  <li *ngFor="let pais of paises | async | filter: filterText">
    {{pais.$key}}
  </li>
</ul>

但我需要使用静态字符串而不是动态ngModel变量

<li *ngFor="let pais of paises | async | filter: 'I NEED TO PASS A STRING IN HERE'">

我怎样才能在冒号后立即传递一个字符串?

提前谢谢你!我仍然是角落的菜鸟 编辑:

这是我的管道

import {Pipe, PipeTransform} from '@angular/core';

@Pipe({name: 'filter'})
export class FilterPipe implements PipeTransform{
transform(embajador:any, term: any): any{
    // check if search term is undefined
    if (term === undefined) return embajador;
    // return search
    return embajador.filter(function(embajador){
        return embajador.$key.toLowerCase().includes(term.toLowerCase());
    })
}
}

从firebase中检索paises中的数据,这就是对象的样子

{
  "paises" : {
    "argentina" : {
      "active" : true,
      "location" : 0
    },
    "jamaica" : {
      "active" : true,
      "location" : 4
    }
  }
}

这是我的主页组件看起来像

import { Component } from '@angular/core';
import { Pipe, PipeTransform} from '@angular/core';
import { NavController, AlertController } from 'ionic-angular';
import {AngularFire, FirebaseListObservable} from 'angularfire2';
import {FilterPipe} from './filter.pipe'
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class HomePage {
  paises: FirebaseListObservable<any>;
constructor(public navCtrl: NavController, public alertCtrl: AlertController, 
  af: AngularFire) {
  this.paises = af.database.list('/paises');
}

}

我还想补充说,如果这有任何不同,我正在使用Ionic 2

0 个答案:

没有答案