以下是一个使用Angular Material中的表格组件来实现按所有列筛选的示例代码:
npm install @angular/material @angular/cdk @angular/animations
import { MatTableModule } from '@angular/material/table';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
@NgModule({
imports: [
MatTableModule,
MatInputModule,
MatFormFieldModule,
MatButtonModule,
MatIconModule
]
})
export class YourModule { }
import { MatTableDataSource } from '@angular/material/table';
export class YourComponent {
dataSource = new MatTableDataSource(YOUR_DATA);
filterValue: string;
applyFilter() {
this.dataSource.filter = this.filterValue.trim().toLowerCase();
}
}
筛选
列1
{{ element.column1 }}
export class YourComponent {
displayedColumns: string[] = ['column1', 'column2', 'column3'];
// ...
}
这样,你就可以在表格的每一列中进行筛选。当输入框的值发生变化时,applyFilter()
方法会被调用,将输入框的值应用到表格数据源的筛选器中。