如何控制使用另一组件上的分页显示的席子表的行

Question

我想在应该与学生表组件交互的分页组件中使用分页，所以我可以控制该表中的行数，并且我想使用下一个和上一个按钮。我已经在students-table组件中使用了分页功能，但它可以正常工作，但是这次我想将它们分开。现在我可以将页面大小传递给table组件，但是我不能限制表格行。有没有人可以帮帮我吗？

pagination.component.html：

<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" ></mat-paginator>

pagination.component.ts：

import { Component, OnInit, ViewChild, Input, Output, EventEmitter } from '@angular/core';
import { MatPaginator } from '@angular/material';
import { MissionService } from '../mission.service';

@Component({
selector: 'app-pagination',
templateUrl: './pagination.component.html',
styleUrls: ['./pagination.component.scss']
})
export class PaginationComponent implements OnInit {
@ViewChild(MatPaginator) paginator: MatPaginator;
@Output() myPageSize: any;
// tslint:disable-next-line:use-life-cycle-interface
   constructor() {}
   ngOnInit() {
   }
   // tslint:disable-next-line:use-life-cycle-interface
   ngAfterViewInit() {
     this.paginator.page.subscribe(
         (event: any[]) =>
         this.myPageSize = event.pageSize ); }

 }

students-table.component.html：

    <div class="example-header">
      <mat-form-field>
        <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
      </mat-form-field>
    </div>
    <div class="example-container mat-elevation-z8">
      <mat-table [dataSource]="dataSource" matSort>
        <!-- ID Column -->
        <ng-container  matColumnDef="ID">
          <mat-header-cell *matHeaderCellDef mat-sort-header>ID </mat-header-cell>
          <mat-cell *matCellDef="let row"> {{row.ID}} </mat-cell>
        </ng-container>
        <!-- firstName Column -->
        <ng-container matColumnDef="firstName">
          <mat-header-cell *matHeaderCellDef mat-sort-header> firstName </mat-header-cell>
          <mat-cell *matCellDef="let row"> {{row.firstName}} </mat-cell>
        </ng-container>
        <!-- lastName Column -->
        <ng-container matColumnDef="lastName">
          <mat-header-cell *matHeaderCellDef mat-sort-header> lastName </mat-header-cell>
          <mat-cell *matCellDef="let row" | slice:0:10; let i=index""> {{row.lastName}} </mat-cell>
        </ng-container>
        <!-- mathMark Column -->
        <ng-container matColumnDef="mathMark">
          <mat-header-cell *matHeaderCellDef mat-sort-header> mathMark </mat-header-cell>
          <mat-cell *matCellDef="let row"> {{row.mathMark}} </mat-cell>
        </ng-container>
        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;">
        </mat-row>
      </mat-table>
    </div>
    <li>
      {{paginator.myPageSize}}
    </li>
    <app-pagination #paginator>  </app-pagination>

students-table.component.ts：

    import {Component, ViewChild} from '@angular/core';
    import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
    import {Student} from '../student';
    import {STUDENTS} from '../students-list';
    import { MissionService } from '../mission.service';
    @Component({
      // tslint:disable-next-line:component-selector
      selector: 'students-table',
      styleUrls: ['students-table.component.scss'],
      templateUrl: 'students-table.component.html',
    })
    // tslint:disable-next-line:component-class-suffix
    export class StudentsTable {
      displayedColumns = ['ID', 'firstName', 'lastName', 'mathMark'];
      dataSource: MatTableDataSource<Student>;

      @ViewChild(MatPaginator) paginator: MatPaginator;
      @ViewChild(MatSort) sort: MatSort;
      constructor() {
        const students = STUDENTS;
          this.dataSource = new MatTableDataSource(students);
      }
      // tslint:disable-next-line:use-life-cycle-interface
      ngAfterViewInit() {
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
      }

      applyFilter(filterValue: string) {
        filterValue = filterValue.trim(); // Remove whitespace
        filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
        this.dataSource.filter = filterValue;
      }
    }

如果我选择页面大小为10，则通过使用按钮，表格仅显示10行，最后一行显示在下一页。