如何以角度将分页组件添加到表格中？答案

【问题标题】：how to add a pagination component to a table in angular?如何以角度将分页组件添加到表格中？
【发布时间】：2019-07-03 23:59:08
【问题描述】：

我是 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() {
  }

}

分页.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>

【问题讨论】：

您创建了一个分页组件，但您没有以任何方式将它与您的 mat-table 连接。并且角材料支持开箱即用的分页，这里是example。
@AmirArbabian - 您的示例链接已损坏。我在标签标题中收到错误。并且在正文中无法获取 /api/angular/v1
对不起，这里是stackblitz.com/angular/…
您是否有任何具体原因要创建自定义分页组件？
@AmirArbabian 感谢您的回复。我想在单独的组件中添加分页。我用“@viewChild”和“@Input”连接table.component和pagination.component，但是不知道哪里错了。

标签： html angular pagination

【解决方案1】：

我认为是因为dataSource 和paginator 没有连接。

如果你之前看过Material example；你会注意到MatTableDataSource 有paginator 属性同样sort 属性。

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

像这样：

分页.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;
  }

应该可以的。

【讨论】：