要解决这个问题,您可以按照以下步骤进行操作:
MatTableModule
和MatSortModule
。import { MatTableModule } from '@angular/material/table';
import { MatSortModule } from '@angular/material/sort';
@NgModule({
imports: [
MatTableModule,
MatSortModule
],
...
})
export class AppModule { }
mat-table
和matSort
指令,并将数据源绑定到表格中。
名称
{{row.name}}
import { MatTableDataSource } from '@angular/material/table';
export class YourComponent implements OnInit {
dataSource: MatTableDataSource;
displayedColumns = ['name', 'email', 'phone'];
ngOnInit() {
// 初始化数据源
this.dataSource = new MatTableDataSource(yourDataArray);
// 设置过滤器
this.dataSource.filterPredicate = (data: any, filter: string) => {
return data.name.toLowerCase().includes(filter);
};
}
applyFilter(filterValue: string) {
// 应用过滤器
this.dataSource.filter = filterValue.trim().toLowerCase();
}
}
applyFilter
方法来应用过滤器。
通过按照以上步骤进行操作,您应该能够在使用mat-table
时正确地过滤数据并返回结果。