在Angular中,可以使用内置的管道(pipe)来实现基本的过滤功能。以下是一个使用Angular过滤数据的示例:
- {{ item }}
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(items: string[], searchKeyword: string): string[] {
if (!searchKeyword) {
return items;
}
return items.filter(item => item.includes(searchKeyword));
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { FilterPipe } from './filter.pipe';
@NgModule({
declarations: [
AppComponent,
FilterPipe
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
现在,当用户在搜索框中输入关键字时,数据将根据输入的搜索关键字进行过滤,并显示匹配的结果。
希望以上解决方案能够帮助到你!