web-dev-qa-db-ja.com

マテリアル2 HttpとDataSourceによるページネーション

DataSourceを使用したMaterial Paginationで問題が発生しています。 RESTサービスが提供する照合からの合計アイテムをサービスから取得する必要があります（変更することはできません）。これまでにできる唯一の方法は、同じリクエストを2回行いますが、それは正しくありません。

「servers-collection.component.ts」を見ると、ページネーションの合計アイテム（リクエスト応答の「total_items」）を取得するためだけに「getServiceData」を呼び出しています。私が探しているのは、メインのリクエストから直接データを取得することです。

これは私が持っている生の応答です（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
}

...そして、これは私がそれに対処するためにしたことです：

servers-collection.component.html

<div class="example-container mat-elevation-z8">
    <mat-table #table [dataSource]="dataSource">
        <!-- ID Column -->
        <ng-container matColumnDef="id">
            <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
            <mat-cell *matCellDef="let row"> {{row.id}} </mat-cell>
        </ng-container>

        <!-- Name Column -->
        <ng-container matColumnDef="name">
            <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
            <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
        </ng-container>

        <!-- IP Address Column -->
        <ng-container matColumnDef="ipAddress">
            <mat-header-cell *matHeaderCellDef> IP Address </mat-header-cell>
            <mat-cell *matCellDef="let row"> {{row.ipAddress}} </mat-cell>
        </ng-container>

        <!-- Host Name Column -->
        <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 {
    // Display Data
    displayedColumns = ['id', 'name', 'ipAddress', 'hostName'];
    dataSource:ServersDataSource|null;
    pageEvent:PageEvent;

    //Pagination
    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'];
    }
}

よろしくお願いします！

angularrestpaginationangular-material2angular-cdk
14
tworems

自分で答えを見つけました。スコープであることがわかりました（適切に理解していなかった）。

Observer内で変数をクラスに直接設定することはできません。私にできることは、メソッドを呼び出して、必要なものを渡すことです。基本的に見えるかもしれませんが、ここに到着するまでに1週間かかりました。

したがって、これはコード化された方法です：

servers-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 {
    // Data
    displayedColumns = ['id', 'name', 'ipAddress', 'hostName'];
    dataSource:ServersDataSource|null;
    data:any;

    // Pagination
    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();
    }
}

これが誰かを助けることを願っています。

9
tworems

このコードをありがとう。私はこのようなページネーターを使用しました：

<mat-paginator #pagination [length]="length" 
[pageSize]="pageSize 
[pageSizeOptions]="pageSizeOptions" 
(page)="pageEvent = onPaginationChange($event)"> 
// instead of loadData($event) 
</mat-paginator>

最初のページは0としてインデックスされ、データでは1としてインデックス化されるため、これも変更しました

 onPaginateChange(event) {
    this.pageIndex = event.pageIndex + 1;
    this.pageSize = event.pageSize;
    this.loadData();
}
1
Gandor