如何在角度表中添加分页组件？

Question

我刚接触过角度，并且尝试用分页创建表。 我想向该表添加一个分页组件，但是我的代码无法正常工作。 问题是，当我更改“每页项目”时，表上显示的项目数没有更改。 谁能帮我发现问题？

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>

pagination.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>

Answer 1

我认为这是因为dataSource和paginator未连接。

如果您之前看过Material示例 ； 您会注意到MatTableDataSource同样具有paginator属性和sort属性。

因此，必须使用paginator子对象设置dataSource对象的paginator属性值。

像这样：

pagination.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;
  }

那应该工作。