要实现Angular 7中Material表格列筛选和列排序,可以按照以下步骤进行操作:
npm install @angular/material @angular/cdk
import { MatInputModule, MatTableModule, MatSortModule, MatPaginatorModule } from '@angular/material';
@NgModule({
imports: [
MatInputModule,
MatTableModule,
MatSortModule,
MatPaginatorModule
]
})
export class AppModule { }
mat-table
来创建表格,并在表格标题行中使用mat-sort-header
来启用列排序:
Name
{{element.name}}
Age
{{element.age}}
import { Component, OnInit, ViewChild } from '@angular/core';
import { MatTableDataSource, MatSort, MatPaginator } from '@angular/material';
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit {
displayedColumns: string[] = ['name', 'age']; // 定义要显示的列
dataSource = new MatTableDataSource(yourDataArray); // 定义数据源
@ViewChild(MatSort, {static: true}) sort: MatSort; // 初始化排序功能
@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator; // 初始化分页功能
ngOnInit() {
this.dataSource.sort = this.sort;
this.dataSource.paginator = this.paginator;
}
}
通过上述步骤,你可以实现Angular 7中Material表格列筛选和列排序的功能。请将YourDataType
替换为数据类型,并将yourDataArray
替换为要显示的实际数据数组。