Question

我在创建管道以从输入中过滤列表时遇到问题。

我想要的是这样的：http://www.w3schools.com/howto/howto_js_filter_lists.asp

有没有人可以帮我为此创建管道？

更新，我用一个命题更改了代码，但仍然无法使用我的部分代码。

我的代码中的一些部分：

component.html：

＆＃13;

<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>

＆＃13;

alarmList是一个数组：

enter image description here

search.pipe.ts 我也必须更改管道代码为＆＃34;包含＆＃34;没有工作，我将类型更改为任何：

＆＃13;

    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;
    }
}

＆＃13;

Answer 1

你不应该用我相信的烟斗那样做。

你想要的是对你的itemssource'armmlist'执行一个管道操作，其中angular 2不允许。

你可以做的是这样的事情，我不建议这样做，因为这是丑陋的代码：

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

我的建议是创建另一个属性：filteredAlarmList，您可以在(change)的{{1}}事件或desc属性的setter中编辑，然后重写您的ngFor <input>

如果您需要多次进行此类过滤，则可以将所有这些过滤到单独的组件中。例如：FilterListComponent将接受2个输入：searchText和List（在你的情况下为AlarmList）

Answer 2

这样的事情可以帮助

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;
        }
     }
   }
}

在您的组件中

@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(){

   }
}

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

2 个答案: