在Angular中,可以使用自定义搜索过滤器来过滤包含指定字符串的字符串数组。以下是一个示例解决方法:
searchFilter
的自定义过滤器:import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'searchFilter'
})
export class SearchFilterPipe implements PipeTransform {
transform(items: string[], searchText: string): string[] {
if (!items) return [];
if (!searchText) return items;
searchText = searchText.toLowerCase();
return items.filter(item => {
return item.toLowerCase().includes(searchText);
});
}
}
-
{{ item }}
items
和searchText
变量:import { Component } from '@angular/core';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent {
items: string[] = ['apple', 'banana', 'cherry', 'date'];
searchText: string = '';
}
在上面的示例中,searchFilter
过滤器将接收一个字符串数组和搜索文本作为参数,并返回一个新的经过过滤的字符串数组。在HTML模板中,使用管道符号|
将过滤器应用于items
数组,并将过滤后的结果显示在列表中。输入框使用[(ngModel)]
双向绑定到searchText
变量,以实现实时搜索过滤效果。