在Angular中,可以使用filter
管道来过滤数据,并获取过滤后的结果。以下是获取过滤器更改后的结果的正确方式的示例代码:
ngModel
指令来绑定输入框的值到组件中的一个变量:
filter
管道来过滤数据,并将过滤后的结果赋值给一个新的变量:
{{ item }}
items
数组来存储要过滤的数据:export class AppComponent {
searchText: string;
items: string[] = ['apple', 'banana', 'orange'];
}
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.toLowerCase().includes(searchText);
});
}
}
declarations
数组中:import { FilterPipe } from './filter.pipe';
@NgModule({
declarations: [AppComponent, FilterPipe],
// ...
})
export class AppModule { }
通过这种方式,当输入框的值发生变化时,filter
管道会自动重新计算过滤后的结果,并更新显示在模板中的数据。