要为Angular 4的Mat数据表添加页脚,可以按照以下步骤进行:
npm install --save @angular/material @angular/cdk @angular/animations
import { MatTableModule } from '@angular/material/table';
import { MatPaginatorModule } from '@angular/material/paginator';
@NgModule({
imports: [
MatTableModule,
MatPaginatorModule
],
// ...
})
export class AppModule { }
import { Component, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';
@Component({
selector: 'app-table',
template: `
Name
{{element.name}}
`,
})
export class TableComponent {
displayedColumns: string[] = ['name', 'age', 'city'];
dataSource = new MatTableDataSource(YOUR_DATA);
@ViewChild(MatPaginator) paginator: MatPaginator;
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
}
}
注意,你需要根据你的实际数据和列名修改代码中的YOUR_DATA和displayedColumns变量。
这样,你就可以在Angular 4的Mat数据表中添加页脚了。