Angular 6-如何向材质表添加分页

Question

I can't figure out how to add pagination to my Material Data table. I've tried a few methods, but I couldn't get it to work. The data is coming from a server. I'm using Angular 6 and material from material.angular.io. Any help will be appreciated.

Service:

getReturn(id) {
  let params = new HttpParams().set('returnId', id);
  return this.http.get(`${this.url}/API/v1/Return/GetReturn`, {
    headers: headers,
    params: params
  });
}

New Returns Componenet

import { Component, OnInit, Input } from '@angular/core';
import { ReturnsService } from '../../returns.service';
import { ActivatedRoute, Router, ParamMap } from '@angular/router';
import { ViewChild } from '@angular/core';
import {
  MatToolbar,
  PageEvent,
  MatPaginator,
  MatSpinner
} from '@angular/material';
import { DataSource } from '@angular/cdk/collections';
import { ListReturns } from '../../listReturn';
import { ListstatusService } from '../../liststatus.service';

@Component({
  selector: 'new-returns',
  templateUrl: './newreturns.component.html',
  styleUrls: ['./newreturns.component.css']
})
export class NewreturnsComponent implements OnInit {

  @ViewChild(MatPaginator)
  paginator: MatPaginator;

  public list = [];

  displayedColumns = ['orderId', 'date', 'prime', 'status', 'actions'];

  constructor(
    private returns: ReturnsService,
    private route: ActivatedRoute,
    private status: ListstatusService
  ) {}

  ngOnInit() {
    this.status.currentStatus.subscribe(status => {
      this.getList();
    });
  }

  getList() {
    this.returns.listReturns().subscribe(data => {
      this.list = data;
    });
  }

  getNext(event: PageEvent) {
    let offset = event.pageSize * event.pageIndex;
  }
}

newturns.componenet.html:

<div class="center-width-separator">
  <div *ngIf="list.loading$ | async">
    <mat-spinner></mat-spinner>
  </div>
  <mat-table #table [dataSource]="list" matSort>
    <ng-container matColumnDef="orderId">
      <mat-header-cell *matHeaderCellDef>Order ID</mat-header-cell>
      <mat-cell *matCellDef="let i">{{i.orderId}}</mat-cell>
    </ng-container>

    <ng-container matColumnDef="date">
      <mat-header-cell *matHeaderCellDef>Date</mat-header-cell>
      <mat-cell *matCellDef="let i">{{i.date | date: short}}</mat-cell>
    </ng-container>


    <ng-container matColumnDef="prime">
      <mat-header-cell *matHeaderCellDef>Prime</mat-header-cell>
      <mat-cell *matCellDef="let i">{{i.prime}}</mat-cell>
    </ng-container>


    <ng-container matColumnDef="status">
      <mat-header-cell *matHeaderCellDef>Status</mat-header-cell>
      <mat-cell *matCellDef="let i">{{i.statusKey }}</mat-cell>
    </ng-container>



    <ng-container matColumnDef="actions">
      <mat-header-cell *matHeaderCellDef>Actions</mat-header-cell>
      <mat-cell *matCellDef="let i"><button mat-raised-button color="primary" routerLink="/detail/{{i.returnId}}">Details</button></mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>

  </mat-table>
  <mat-paginator #paginator [pageIndex]=0 [pageSize]=5 (page)="getNext($event)">
  </mat-paginator>
</div>

Thank you

Answer 1

If your get method is ok and return appropriate data then you should change

import { Component, OnInit, Input } from '@angular/core';
import { ReturnsService } from '../../returns.service';
import { ActivatedRoute, Router, ParamMap } from '@angular/router';
import { ViewChild } from '@angular/core';
import {
         MatToolbar,
         PageEvent,
         MatPaginator,
         MatSpinner
       } from '@angular/material';
import { DataSource } from '@angular/cdk/collections';
import { ListReturns } from '../../listReturn';
import { ListstatusService } from '../../liststatus.service';

@Component({
selector: 'new-returns',
templateUrl: './newreturns.component.html',
styleUrls: ['./newreturns.component.css']
})
export class NewreturnsComponent implements OnInit {

@ViewChild(MatPaginator) paginator: MatPaginator;

// change public list = []; to
   public list = new MatTableDataSource();

  displayedColumns = ['orderId', 'date', 'prime', 'status', 'actions'];

  constructor(
   private returns: ReturnsService,
   private route: ActivatedRoute,
   private status: ListstatusService
   ) {}

  ngAfterViewInit() {
  // add ngAfterViewInit hook
     this.list.paginator = this.paginator;
  }

  ngOnInit() {
   this.status.currentStatus.subscribe(status => {
   this.getList();
   });
 }

 getList() {
  this.returns.listReturns().subscribe(data => {
   //change this.list = data; to
     this.list.data = data;
  });
 }
 /*
 getNext(event: PageEvent) {
  let offset = event.pageSize * event.pageIndex;
 }*/

} //New Returns Component

and in newturns.componenet.html mat-paginator tag is changed

 <div class="center-width-separator">
  <div *ngIf="list.loading$ | async">
   <mat-spinner></mat-spinner>
  </div>
   <mat-table #table [dataSource]="list" matSort>
     <ng-container matColumnDef="orderId">
       <mat-header-cell *matHeaderCellDef>Order ID</mat-header-cell>
       <mat-cell *matCellDef="let i">{{i.orderId}}</mat-cell>
     </ng-container>

     <ng-container matColumnDef="date">
       <mat-header-cell *matHeaderCellDef>Date</mat-header-cell>
       <mat-cell *matCellDef="let i">{{i.date | date: short}}</mat-cell>
     </ng-container>


     <ng-container matColumnDef="prime">
       <mat-header-cell *matHeaderCellDef>Prime</mat-header-cell>
      <mat-cell *matCellDef="let i">{{i.prime}}</mat-cell>
     </ng-container>


     <ng-container matColumnDef="status">
       <mat-header-cell *matHeaderCellDef>Status</mat-header-cell>
       <mat-cell *matCellDef="let i">{{i.statusKey }}</mat-cell>
     </ng-container>



     <ng-container matColumnDef="actions">
       <mat-header-cell *matHeaderCellDef>Actions</mat-header-cell>
       <mat-cell *matCellDef="let i"><button mat-raised-button color="primary" 
         routerLink="/detail/{{i.returnId}}">Details</button></mat-cell>
     </ng-container>

     <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
     <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>

     </mat-table>
    <!-->add this mat-paginator tag<-->
     <mat-paginator #paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 25, 50]">
     </mat-paginator>
   </div> <!-->newturns.componenet.html<-->

Hope it was useful.