问题描述
我正在尝试对有角度的材料表进行分页。该表目前具有虚拟静态数据,将来一旦后端 api 准备就绪,它将被调用以填充该表。目前,该表未将数据显示为分页。即使 Angular 材质分页器显示在表格底部,也会显示所有行。我尝试了所有相关的堆栈溢出答案,但即使显示了分页器,表格仍然显示了整个数据。下面的代码是从angular material example复制的相同代码,我在新组件中使用了相同的代码,只是列名不同。
home-component.html
<div class="col-12">
<table mat-table class="mat-elevation-z8" [dataSource]="dataSource">
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="weight">
<th mat-header-cell *matHeaderCellDef> Weight </th>
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
<th mat-header-cell *matHeaderCellDef> Symbol </th>
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="[5,10,20]" showFirstLastButtons></mat-paginator>
</div>
home-component.ts
@Component({
selector: 'home-component',styleUrls: ['home-component.css'],templateUrl: 'home-component.html',})
export class HomeComponent implements OnInit,AfterViewInit {
displayedColumns: string[] = ['position','name','weight','symbol'];
dataSource: MatTableDataSource<PeriodicElement>;
@ViewChild(MatPaginator) paginator: MatPaginator;
ngOnInit(): void {
this.dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
}
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
}
}
export interface PeriodicElement {
name: string;
position: number;
weight: number;
symbol: string;
}
const ELEMENT_DATA: PeriodicElement[] = [
{position: 1,name: 'Hydrogen',weight: 1.0079,symbol: 'H'},{position: 2,name: 'Helium',weight: 4.0026,symbol: 'He'},{position: 3,name: 'Lithium',weight: 6.941,symbol: 'Li'},{position: 4,name: 'Beryllium',weight: 9.0122,symbol: 'Be'},{position: 5,name: 'Boron',weight: 10.811,symbol: 'B'},{position: 6,name: 'Carbon',weight: 12.0107,symbol: 'C'},{position: 7,name: 'nitrogen',weight: 14.0067,symbol: 'N'},{position: 8,name: 'Oxygen',weight: 15.9994,symbol: 'O'},{position: 9,name: 'Fluorine',weight: 18.9984,symbol: 'F'},{position: 10,name: 'Neon',weight: 20.1797,symbol: 'Ne'},{position: 11,name: 'sodium',weight: 22.9897,symbol: 'Na'},{position: 12,name: 'Magnesium',weight: 24.305,symbol: 'Mg'},{position: 13,name: 'Aluminum',weight: 26.9815,symbol: 'Al'},{position: 14,name: 'Silicon',weight: 28.0855,symbol: 'Si'},{position: 15,name: 'Phosphorus',weight: 30.9738,symbol: 'P'},{position: 16,name: 'Sulfur',weight: 32.065,symbol: 'S'},{position: 17,name: 'Chlorine',weight: 35.453,symbol: 'Cl'},{position: 18,name: 'Argon',weight: 39.948,symbol: 'Ar'},{position: 19,name: 'Potassium',weight: 39.0983,symbol: 'K'},{position: 20,name: 'Calcium',weight: 40.078,symbol: 'Ca'},];
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)