如何在 Angular2 中创建管道以过滤列表

Question

I'm facing problem with creating the pipe to filter list from input.

What I would like to have is something like this: http://www.w3schools.com/howto/howto_js_filter_lists.asp

Is there anybody who can help me with creating pipe for this?

Update , I changed the code with one proposition and it is still not working with my part of code.

Some parts from my code:

component.html:

 <input id="desc" type="text" placeholder="Alarm name" [(ngModel)]="desc"> <ul> <li *ngFor="let name of names" [style.display]="(name | search : desc) ? 'block' : 'none'"> {{ name }} </li> </ul> <div class="alarm-list-item" *ngFor="let alarm of alarmsList" [style.display]="(alarm.Description | search : desc) ? 'block' : 'none'"> {{alarm.Description }} </div>

alarmList is an array:

enter image description here

search.pipe.ts also I had to change the pipe code as "contains" doesn't work and I change type to any:

 import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'search' }) export class SearchPipe implements PipeTransform { transform(list: any, searchText: any): any { for(let i=0; i<list.length; i++){ if(list[i].includes(searchText)){ return true; } } return false; } }

Answer 1

You're not supposed to do that with a Pipe I believe.

What you want is to perform a pipe operation on your itemssource 'alarmlist' which angular 2 won't allow.

What you could do though is something like this, which I'd not advise since it's ugly code:

https://plnkr.co/edit/3e6cFSBFIf0uYYIgKNZ8?p=preview

My advice would be to make another property: filteredAlarmList which you would edit in the (change) event of the <input> or the setter of your desc property and then rewrite your ngFor like *ngFor="let alarm of filteredAlarmList"

If you need this kind of filtering multiple times you could extract all of this to a seperate components. eg: FilterListComponent which will take 2 inputs: searchText and List (in your case AlarmList)

Answer 2

something like this could help

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

@Pipe({
   name: 'search',
   pure: true
})

export class SearchPipe implements PipeTransform {
   transform(value: any, args:string=''): any {
     console.log(value);
     if(!value) return value;
     else {
        if(value.toLowerCase().indexOf(args.toLowerCase())!= -1) {
           return value;
        }
     }
   }
}

In your component

@Component({
   selector: 'my-app',
   template: `
      <input type="text" [(ngModel)]="filterValue">
      <ul>
        <li *ngFor="let name of names">{{name | search:filterValue}}</li>
      </ul>`,
   })

export class AppComponent  { 
   names:Array<string> = ['Agnes','Adele','Binny','Bob'];
   constructor(){

   }
}