I'm having issues with Material Pagination working with a DataSource. I need to return from the Service all the items from the sort that the REST service provides (I cannot change it). So far, the only way to do this is to make the same request twice, and this is simply not the case.
If you look at "servers-collection.component.ts", I call "getServiceData" to get the total number of items to paginate ("total_items" in the response to the request). I am looking to get data directly from the main query.
This is the original answer I have (GET):
{
"_links": {
"self": {
"href": "https://{URL}/servers?page=1"
},
"first": {
"href": "http://{URL}/servers"
},
"last": {
"href": "http://{URL}/servers?page=100"
},
"next": {
"href": "http://{URL}/servers?page=2"
}
},
"_embedded": {
"servers": [
{
"id": 1,
"name": "Server Name",
"ipAddress": "111.222.333.444",
"hostName": "server.hostname.com",
"_links": {
"self": {
"href": "http://{URL}/servers/1"
}
}
}
]
},
"page_count": 100,
"page_size": 5,
"total_items": 498,
"page": 1
}
... and this is what I did to handle this:
servers-collection.component.html
<div class="example-container mat-elevation-z8">
<mat-table #table [dataSource]="dataSource">
<ng-container matColumnDef="id">
<mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.id}} </mat-cell>
</ng-container>
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
</ng-container>
<ng-container matColumnDef="ipAddress">
<mat-header-cell *matHeaderCellDef> IP Address </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.ipAddress}} </mat-cell>
</ng-container>
<ng-container matColumnDef="hostName">
<mat-header-cell *matHeaderCellDef> Hostname </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.hostName}} </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 #pagination
[length]="length"
[pageSize]="pageSize"
[pageSizeOptions]="pageSizeOptions"
(page)="pageEvent = loadData($event)">
</mat-paginator>
</div>
servers- collection.component.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator, PageEvent } from "@angular/material";
import { ServersService } from "../../../shared/services/servers/servers.service";
import { ServersDataSource } from "../../../shared/data-source/server.datasource";
@Component({
selector: 'app-servers-collection',
templateUrl: './servers-collection.component.html',
styleUrls: ['./servers-collection.component.css']
})
export class ServersCollectionComponent implements OnInit {
displayedColumns = ['id', 'name', 'ipAddress', 'hostName'];
dataSource:ServersDataSource|null;
pageEvent:PageEvent;
length:number;
pageSize:number = 10;
pageIndex:number = 1;
pageSizeOptions:number[] = [5, 10, 25, 50, 100];
@ViewChild(MatPaginator) pagination: MatPaginator;
constructor(public serversService:ServersService) {
}
ngOnInit() {
this.loadData();
}
loadData() {
this.serversService.getServiceData(this.pageIndex, this.pageSize).subscribe(serviceData => {
this.length = serviceData['total_items'];
}
);
this.dataSource = new ServersDataSource(this.serversService, this.pagination);
}
}
server.datasource.ts
import { DataSource } from '@angular/cdk/collections';
import { Observable } from 'rxjs/Observable';
import { MatPaginator } from "@angular/material";
import { Server } from "../interfaces/Server";
import { ServersService } from "../services/servers/servers.service";
export class ServersDataSource extends DataSource<any> {
constructor(private _serverService: ServersService, private _pagination : MatPaginator) {
super();
}
connect(): Observable<Server[]> {
return this._serverService.getServers(this._pagination.pageIndex + 1, this._pagination.pageSize);
}
disconnect() {}
}
servers.service.ts
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from "rxjs/Observable";
import { Server } from "../../interfaces/Server";
import 'rxjs/add/operator/map';
@Injectable()
export class ServersService {
url:string = 'http://{URL}/servers';
servers:Server[];
constructor(private http: Http) {
}
getServiceData(startIndex, pageSize) {
return this.http.get(this.url + '?page=' + startIndex + '&limit=' + pageSize)
.map(response => response.json());
}
getServers(startIndex, pageSize): Observable<Server[]> {
return this.http.get(this.url + '?page=' + startIndex + '&limit=' + pageSize)
.map(this.extractData);
}
extractData(result: Response): Server[] {
return result.json()['_embedded']['servers'];
}
}
!
Edit:
. , ( ).
Observer . , , . , , .
:
-collection.component.ts:
import { Component, OnInit } from '@angular/core';
import { ServersService } from "../../../shared/services/servers/servers.service";
import { ServersDataSource } from "../../../shared/data-source/server.datasource";
@Component({
selector: 'app-servers-collection',
templateUrl: './servers-collection.component.html',
styleUrls: ['./servers-collection.component.css']
})
export class ServersCollectionComponent implements OnInit {
displayedColumns = ['id', 'name', 'ipAddress', 'hostName'];
dataSource:ServersDataSource|null;
data:any;
length:number;
pageIndex:number = 1;
pageSize:number = 10;
pageSizeOptions:number[] = [5, 10, 25, 50, 100];
constructor(private _serversService:ServersService) {
}
ngOnInit() {
this.loadData();
}
loadData() {
this.data = this._serversService.getData(this.pageIndex, this.pageSize);
this.data.subscribe(data => {
this.setPagination(data['total_items'], data['page'], data['page_size']);
this.dataSource = new ServersDataSource(data['_embedded']['servers']);
});
}
setPagination(length, startIndex, pageSize) {
this.length = length;
this.pageIndex = startIndex;
this.pageSize = pageSize;
}
onPaginateChange(event) {
this.pageIndex = event.pageIndex;
this.pageSize = event.pageSize;
this.loadData();
}
}
server.datasource.ts:
import { DataSource } from '@angular/cdk/collections';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import { Server } from "../interfaces/Server";
export class ServersDataSource extends DataSource<any> {
constructor(private _servers:Server[]) {
super();
}
connect(): Observable<Server[]> {
return Observable.of(this._servers);
}
disconnect() {}
}
servers.service.ts:
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from "rxjs/Observable";
import 'rxjs/add/operator/map';
@Injectable()
export class ServersService {
url:string = 'http://{URL}/servers';
constructor(private http: Http) {
}
getData(startIndex, pageSize): Observable<any> {
return this.http.get(this.url + '?page=' + startIndex + '&limit=' + pageSize)
.map(this.extractData);
}
extractData(result: Response) {
return result.json();
}
}
, -.