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个结果。我不知道如何将其与垫子分页器联系起来。

Answer 1

Mat-Paginator有一个属性（页面），当分页器更改页面大小或页面索引时，它将发出一个事件。在您的情况下，根据我的理解，每当页面索引发生更改时，您希望使用不同的偏移量执行另一个API调用以获取正确的数据集。

您可以将当前的mat-paginator替换为：

<强>毡分页程序

getNext($event)

传递到pageSize的事件将包含pageIndex和pageSize，您可以使用它来计算偏移量。

在列表组件中，您可以创建一个可以接收pageIndex和getNext(event: PageEvent) { offset = event.pageSize * event.pageIndex // call your api function here with the offset }的函数，计算偏移量，然后使用新的偏移量进行API调用。

<强> list.component.ts

someClass.f

如果您有任何疑问，请与我们联系。祝你好运！

具有分页的Angular 5 Material HTTP数据

1 个答案: