以下是一个使用Angular 7创建带有分页、排序和筛选功能的表格的示例代码:
npm install @angular/material @angular/cdk @angular/animations
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatTableModule } from '@angular/material/table';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSortModule } from '@angular/material/sort';
import { MatInputModule } from '@angular/material/input';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatTableModule,
MatPaginatorModule,
MatSortModule,
MatInputModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
import { Component, OnInit, ViewChild } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
export interface UserData {
id: string;
name: string;
progress: string;
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
displayedColumns: string[] = ['id', 'name', 'progress'];
dataSource: MatTableDataSource;
@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
@ViewChild(MatSort, {static: true}) sort: MatSort;
ngOnInit() {
const users: UserData[] = [
{id: '1', name: 'John', progress: '80%'},
{id: '2', name: 'Jane', progress: '90%'},
{id: '3', name: 'Mike', progress: '70%'},
{id: '4', name: 'Sarah', progress: '65%'},
{id: '5', name: 'Chris', progress: '75%'},
{id: '6', name: 'Laura', progress: '85%'},
{id: '7', name: 'Tom', progress: '60%'},
{id: '8', name: 'Kate', progress: '95%'},
{id: '9', name: 'Steve', progress: '55%'},
{id: '10', name: 'Emily', progress: '75%'}
];
this.dataSource = new MatTableDataSource(users);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
applyFilter(filterValue: string) {
this.dataSource.filter = filterValue.trim().toLowerCase();
}
}
ID
{{user.id}}
Name
{{user.name}}
Progress
{{user.progress}}
这样就可以创建一个带有分页、排序和筛选功能的表格了。