具有分页的Angular 5 Material HTTP数据

Question

我从后端资源获取数据并创建角度材料数据表.我一次检索一组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个结果.我不知道如何将其与mat paginator联系起来.

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
  }

如果您有任何疑问,请告诉我.祝好运!