如何在 Angular2 中创建管道以过滤列表
How to create pipe to filter list in Angular2
我在创建管道以从输入过滤列表时遇到问题。
我想要的是这样的:http://www.w3schools.com/howto/howto_js_filter_lists.asp
有没有人可以帮助我为此创建管道?
Update,我用一个命题更改了代码,但它仍然无法使用我的部分代码。
我的代码中的一些部分:
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 我还必须更改管道代码,因为 "contains" 不起作用,我将类型更改为任何:
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;
}
}
我相信你不应该用 Pipe 这样做。
您想要的是对您的 itemssource 'alarmlist' 执行管道操作,而 angular 2 不允许。
你可以做的是这样的事情,我不建议这样做,因为它是丑陋的代码:
https://plnkr.co/edit/3e6cFSBFIf0uYYIgKNZ8?p=preview
我的建议是制作另一个 属性: filteredAlarmList,您可以在 <input>
或 setter 的 (change)
事件中编辑它 属性 然后像 *ngFor="let alarm of filteredAlarmList"
一样重写你的 ngFor
如果您多次需要这种过滤,您可以将所有这些提取到一个单独的组件中。例如:FilterListComponent 将采用 2 个输入:searchText 和 List(在您的情况下为 AlarmList)
这样的事情可能会有所帮助
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(){
}
}
我在创建管道以从输入过滤列表时遇到问题。
我想要的是这样的:http://www.w3schools.com/howto/howto_js_filter_lists.asp
有没有人可以帮助我为此创建管道?
Update,我用一个命题更改了代码,但它仍然无法使用我的部分代码。
我的代码中的一些部分:
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 我还必须更改管道代码,因为 "contains" 不起作用,我将类型更改为任何:
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;
}
}
我相信你不应该用 Pipe 这样做。
您想要的是对您的 itemssource 'alarmlist' 执行管道操作,而 angular 2 不允许。
你可以做的是这样的事情,我不建议这样做,因为它是丑陋的代码:
https://plnkr.co/edit/3e6cFSBFIf0uYYIgKNZ8?p=preview
我的建议是制作另一个 属性: filteredAlarmList,您可以在 <input>
或 setter 的 (change)
事件中编辑它 属性 然后像 *ngFor="let alarm of filteredAlarmList"
如果您多次需要这种过滤,您可以将所有这些提取到一个单独的组件中。例如:FilterListComponent 将采用 2 个输入:searchText 和 List(在您的情况下为 AlarmList)
这样的事情可能会有所帮助
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(){
}
}