html - 如何以角度将分页组件添加到表格中?
问题描述
我是 Angular 新手,我尝试创建一个带有分页的表格。我想向该表添加一个分页组件,但我的代码无法正常工作。问题是,当我更改“每页项目”时,表格上显示的项目数量没有改变。谁能帮我找到问题?
table.component.ts:
import { Component, OnInit, ViewChild, Input } from '@angular/core';
import { MatSort, MatTableDataSource } from '@angular/material';
import { PaginationComponent } from '../pagination/pagination.component';
import {PageEvent} from '@angular/material';
export interface Student {
firstName: string;
position: number;
mathScore: number;
lastName: string;
}
const arrayOfStudents: Student[] = [
{ position: 1, firstName: 'Sarah', lastName: 'Williams', mathScore: 12},
{ position: 2, firstName: 'Peter', lastName: 'Jones', mathScore: 15.5},
{ position: 3, firstName: 'Susan', lastName: 'Anderson', mathScore: 18},
{ position: 4, firstName: 'Jack', lastName: 'Green', mathScore: 14},
{ position: 5, firstName: 'Emma', lastName: 'Smith', mathScore: 20},
{ position: 6, firstName: 'Linda', lastName: 'Johnson', mathScore: 13},
{ position: 7, firstName: 'Robert', lastName: 'Brown', mathScore: 11.75},
{ position: 8, firstName: 'Michael', lastName: 'Miller', mathScore: 17},
{ position: 9, firstName: 'Elizabeth', lastName: 'Lopez', mathScore: 17.5},
{ position: 10, firstName: 'Frank', lastName: 'Thomas', mathScore: 19}
];
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit {
displayedColumns: string[] = ['position', 'firstName', 'lastName', 'mathScore'];
dataSource = new MatTableDataSource<Student>(arrayOfStudents);
@ViewChild(MatSort) sort: MatSort;
@ViewChild( PaginationComponent )
private paginationComponent:PaginationComponent;
@Input() length: 100;
@Input() pageSize: 5;
@Input() pageSizeOptions: [5, 10, 25, 100];
@Input() pageEvent: PageEvent;
setPageSizeOptions(setPageSizeOptionsInput: string) {
this.paginationComponent.pageSizeOptions = setPageSizeOptionsInput.split(',').map(str => +str);
}
applyFilter(filterValue: string) {
this.dataSource.filter = filterValue.trim().toLowerCase();
}
ngOnInit() {
this.dataSource.sort = this.sort;
}
}
table.component.html:
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
<div class="mat-elevation-z8">
<table mat-table [dataSource] = "dataSource" matSort>
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef mat-sort-header> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
<!-- First Name Column -->
<ng-container matColumnDef="firstName">
<th mat-header-cell *matHeaderCellDef mat-sort-header> First Name </th>
<td mat-cell *matCellDef="let element"> {{element.firstName}} </td>
</ng-container>
<!-- Last Name Column -->
<ng-container matColumnDef="lastName">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Last Name </th>
<td mat-cell *matCellDef="let element"> {{element.lastName}} </td>
</ng-container>
<!-- Math Score Column -->
<ng-container matColumnDef="mathScore">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Math Score </th>
<td mat-cell *matCellDef="let element"> {{element.mathScore}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<app-pagination (pageSizeOptions)='setPageSizeOptions($event)' ></app-pagination>
</div>
分页.component.ts:
import { Component, OnInit } from '@angular/core';
import {PageEvent} from '@angular/material';
@Component({
selector: 'app-pagination',
templateUrl: './pagination.component.html',
styleUrls: ['./pagination.component.css']
})
export class PaginationComponent implements OnInit {
// MatPaginator Inputs
length = 100;
pageSize = 5;
pageSizeOptions = [5, 10, 25, 100];
// MatPaginator Output
pageEvent: PageEvent;
constructor() { }
ngOnInit() {
}
}
pagination.component.html:
<mat-paginator [length]="length"
[pageSize]="pageSize"
[pageSizeOptions]="pageSizeOptions"
(page)="pageEvent = $event">
</mat-paginator>
<div *ngIf="pageEvent">
<h5>Page Change Event Properties</h5>
<div>List length: {{pageEvent.length}}</div>
<div>Page size: {{pageEvent.pageSize}}</div>
<div>Page index: {{pageEvent.pageIndex}}</div>
</div>
解决方案
我认为那是因为dataSource
和paginator
没有联系。
如果您之前看过Material 示例;你会注意到MatTableDataSource
有paginator
属性也有sort
属性。
因此,您必须使用分页器子对象设置对象的paginator
属性值。dataSource
像这样:
分页.component.ts:
@ViewChild(MatPaginator) paginator: MatPaginator;
table.component.ts:
ngOnInit() {
// because the object is in the child component
this.dataSource.paginator = this.paginationComponent.paginator;
this.dataSource.sort = this.sort;
}
那应该行得通。
推荐阅读
- r - 具有不同条件的多变量异常值
- matlab - 点在matlab中从一个角落移动到另一个角落(围绕显示器)
- c# - 如何统一显示游戏结束场景的得分和高分?
- node.js - docker-compose up:致命:数据库“样板”不存在(Postgres 节点)
- python - 计算字符串中的空格
- r - 如果“实验室(填充=)”不起作用,如何更改 ggplot2 中的图例标题?
- sql - 字符集和国家字符集oracle之间的区别?
- r - 使用刚刚在 data.table 中创建的变量的值
- react-native - withTheme 不是函数反应本机错误
- android - 如何更改 Gradle 脚本中的名称,上面写着 nestoruk_47554 但我需要用我的来更改它