在Angular 6中,没有内置的管道过滤器,但可以使用自定义管道来实现类似的功能。
下面是一个示例解决方案:
filter.pipe.ts
的新文件,并在其中定义一个名为FilterPipe
的自定义管道:import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(items: any[], searchText: string): any[] {
if(!items) return [];
if(!searchText) return items;
searchText = searchText.toLowerCase();
return items.filter( item => {
return item.name.toLowerCase().includes(searchText);
});
}
}
上述代码中,FilterPipe
实现了PipeTransform
接口并定义了一个名为transform
的方法。该方法接收两个参数:items
和searchText
。items
是要过滤的数据数组,searchText
是要搜索的文本。
在transform
方法中,首先检查items
和searchText
是否存在。然后,将searchText
转换为小写,并使用filter
方法对items
进行过滤,只返回包含searchText
的项。
FilterPipe
并将其添加到declarations
数组中:import { FilterPipe } from './filter.pipe';
@Component({
...
declarations: [ FilterPipe ],
...
})
export class YourComponent {
...
}
-
{{ item.name }}
上述代码中,我们使用ngModel
指令将搜索文本绑定到searchText
变量。然后,在*ngFor
指令中,使用管道filter
将items
数组过滤为只包含与searchText
匹配的项。
这样,当用户在输入框中输入文本时,列表将根据输入的文本进行过滤。
希望这个示例能帮助到你!