具有分页功能的 Angular 5 Material HTTP 数据

Question

我正在从后端资源获取数据并创建 Angular Material 数据表。我一次检索一组 50 行。

在返回的 json 对象中，我获得了指向接下来 50 行的链接。我怎样才能用这种方法实现分页。文档不是很清楚。

list.component.html

<div class="example-container mat-elevation-z8">
    <mat-table #table [dataSource]="dataSource">

        <ng-container matColumnDef="Identifier">
            <mat-header-cell *matHeaderCellDef>Identifier</mat-header-cell>
            <mat-cell *matCellDef="let job"> {{job.job_id}} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="ProductName">
            <mat-header-cell *matHeaderCellDef>Product Name</mat-header-cell>
            <mat-cell *matCellDef="let job"> {{job.product_id}} </mat-cell>
        </ng-container>


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

        <ng-container matColumnDef="DateTime">
            <mat-header-cell *matHeaderCellDef>Date & Time</mat-header-cell>
            <mat-cell *matCellDef="let job"> {{job.reg_time | date:'d/MMM/y HH:mm'}} </mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="show(row)"></mat-row>
    </mat-table>

    <mat-paginator [pageSize]="15">
    </mat-paginator>

list.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { JobService } from './../../core/services/job/job.service';
import { Router } from '@angular/router';

import { Observable } from 'rxjs/Observable';
import { merge } from 'rxjs/observable/merge';
import { of as observableOf } from 'rxjs/observable/of';
import { catchError } from 'rxjs/operators/catchError';
import { map } from 'rxjs/operators/map';
import { startWith } from 'rxjs/operators/startWith';
import { switchMap } from 'rxjs/operators/switchMap';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';

@Component({
    selector: 'app-report-list',
    templateUrl: './report-list.component.html',
    styleUrls: ['./report-list.component.scss']
})
export class ReportListComponent implements OnInit {

    displayedColumns = ['Identifier', 'ProductName', 'Status', 'DateTime']
    dataSource = new MatTableDataSource();

    @ViewChild(MatPaginator) paginator: MatPaginator;
    @ViewChild(MatSort) sort: MatSort;

    constructor(private jobService: JobService,
        private router: Router,
        private fb: FormBuilder) { }

    ngOnInit() {

        this.jobService.all().subscribe((res) => {
            this.dataSource = res.data;
            console.log(res);
        });

    }

    show(job) {
        this.router.navigate(['reports/', job.job_id]);
        console.log(job);
    }

}

job.service.ts

import { Injectable } from '@angular/core';
import { ApiService } from './../api/api.service';

@Injectable()
export class JobService {

    constructor(private apiService: ApiService) { }

    all(params = null) {

        let endpoint = "<removed>/api/v1/jobs"

        return this.apiService.get(endpoint,params);

    }

}

数据对象 - 下一个(从 50 开始返回另一个 50。

next: "<removed>/api/v1/jobs?offset=50"

我需要某种方式来分页。我可以再次调用我的服务，传入下一个 url 以检索接下来的 50 个结果。我不知道如何将它与垫分页器联系起来。

Answer 1

Mat-Paginator 有一个属性(页面)，当分页器改变页面大小或页面索引时，它会发出一个事件。在您的情况下，据我了解，每当页面索引发生变化时，您都希望使用不同的偏移量进行另一个 API 调用以获取正确的数据集。

您可以将当前的 mat-paginator 替换为如下所示:

分页器

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

传递到 getNext($event) 的事件将包含一个 pageSize 和 pageIndex，您可以使用它们来计算偏移量。

在您的列表组件中，您可以创建一个函数，该函数可以接受 pageSize 和 pageIndex，计算偏移量，然后使用新的偏移量进行 API 调用.

list.component.ts

  getNext(event: PageEvent) {
    offset = event.pageSize * event.pageIndex
    // call your api function here with the offset
  }

如果您还有其他问题，请告诉我。祝你好运!