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

Question

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

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

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

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

我的代码中的一些部分：

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 是一个数组：

enter image description here

search.pipe.ts 我还必须更改管道代码，因为“包含”不起作用，我将类型更改为任何：

    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

这样的事情可能会有所帮助

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

   }
}

Answer 2

我相信你不应该用 Pipe 这样做。

您想要的是对您的 itemssource 'alarmlist' 执行 angular 2 不允许的管道操作。

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

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

我的建议是创建另一个属性：filteredAlarmList，您可以在 <input> 的 (change) 事件或您的 desc 属性的设置器中编辑它，然后像 *ngFor="let alarm of filteredAlarmList" 一样重写您的 ngFor

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