要实现Angular材料表格过滤功能,可以按照以下步骤进行操作:
ng add @angular/material
创建一个新的Angular组件,用于展示材料表格和过滤功能,例如 "table.component.html" 和 "table.component.ts"。
在 "table.component.html" 中,使用Angular材料库提供的 mat-table
元素来创建表格,同时使用 matInput
元素创建一个输入框用于过滤:
过滤
名字
{{row.name}}
年龄
{{row.age}}
import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit {
dataSource: MatTableDataSource;
displayedColumns = ['name', 'age'];
data = [
{ name: '张三', age: 20 },
{ name: '李四', age: 30 },
{ name: '王五', age: 25 }
];
ngOnInit() {
this.dataSource = new MatTableDataSource(this.data);
}
applyFilter(filterValue: string) {
this.dataSource.filter = filterValue.trim().toLowerCase();
}
}
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TableComponent } from './table/table.component';
@NgModule({
declarations: [TableComponent],
exports: [TableComponent],
imports: [CommonModule]
})
export class SharedModule { }
现在,当你在输入框中输入关键词时,表格将会根据输入值进行过滤,并展示匹配的行。
下一篇:Angular材料表格列不排序