在Angular中,过滤器管道用于对数据进行过滤和转换。下面是一个包含代码示例的解决方法:
filter.pipe.ts
的新管道文件: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);
});
}
}
import { NgModule } from '@angular/core';
import { FilterPipe } from './filter.pipe';
@NgModule({
declarations: [
FilterPipe
],
imports: [],
exports: [
FilterPipe
]
})
export class AppModule { }
- {{ item.name }}
在这个例子中,我们创建了一个输入框用于输入搜索文本,并使用管道对items
数组进行过滤。只有当item.name
包含搜索文本时,它才会显示在列表中。
希望这个示例能帮助到你!