下面是一个使用Angular Material的mat-table组件进行多列筛选动态数据的示例代码:
首先,你需要在你的项目中安装Angular Material和相关的依赖。可以使用以下命令来安装:
npm install @angular/material @angular/cdk @angular/animations
接下来,你需要在你的模块中导入Angular Material相关的模块:
import { MatTableModule } from '@angular/material/table';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSortModule } from '@angular/material/sort';
然后,你需要在模块的imports
数组中添加这些模块:
@NgModule({
imports: [
MatTableModule,
MatInputModule,
MatButtonModule,
MatPaginatorModule,
MatSortModule
],
...
})
export class YourModule { }
接下来,你需要在你的组件中创建一个数据源和一个过滤器对象:
import { Component, OnInit, ViewChild } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { MatSort } from '@angular/material/sort';
import { MatPaginator } from '@angular/material/paginator';
@Component({
...
})
export class YourComponent implements OnInit {
// 声明数据源和过滤器
dataSource: MatTableDataSource;
filterValues = {
column1: '',
column2: '',
...
};
// 获取mat-table的sort和paginator
@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatPaginator) paginator: MatPaginator;
// 初始化数据源和过滤器
ngOnInit() {
// 你的动态数据
const data = [
{ column1: 'value1', column2: 'value2', ... },
...
];
// 初始化数据源
this.dataSource = new MatTableDataSource(data);
// 过滤数据源
this.dataSource.filterPredicate = this.createFilter();
// 将sort和paginator应用到数据源
this.dataSource.sort = this.sort;
this.dataSource.paginator = this.paginator;
}
// 创建过滤器
createFilter(): (data: any, filter: string) => boolean {
let filterFunction = function(data, filter): boolean {
let searchTerms = JSON.parse(filter);
let isMatch = true;
for (const key in searchTerms) {
if (searchTerms[key] !== '') {
isMatch = isMatch && data[key].toLowerCase().indexOf(searchTerms[key].toLowerCase()) !== -1;
}
}
return isMatch;
}
return filterFunction;
}
// 应用过滤器
applyFilter() {
this.dataSource.filter = JSON.stringify(this.filterValues);
}
}
最后,在你的模板中,你可以使用mat-table
组件来展示数据,并在上面添加一个过滤器:
Column 1
{{ element.column1 }}
Column 2
{{ element.column2 }}
...
这个示例中,我们通过在输入框中绑定filterValues