Angular Material 7 分页
<mat-paginator>用于显示带有分页信息的导航器。
在本章中,我们将展示使用Angular Material显示分页器所需的配置。
下面是修改后的app.module.ts文件内容。
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; import {MatPaginatorModule} from '@angular/material' import {FormsModule, ReactiveFormsModule} from '@angular/forms'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, MatPaginatorModule, FormsModule, ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
下面是修改后的app.component.html文件内容。
<mat-paginator [length] = "100" [pageSize] = "10" [pageSizeOptions] = "[5, 10, 25, 100]" (page) = "pageEvent = $event"> </mat-paginator> <div *ngIf = "pageEvent"> <h5>Page Change Event</h5> <div>List length: {{pageEvent.length}}</div> <div>Page size: {{pageEvent.pageSize}}</div> <div>Page index: {{pageEvent.pageIndex}}</div> </div>
结果
细节
这里,我们使用mat-paginator创建了一个分页器,并处理它的change事件。