Question

我正在尝试使用ngx-pagination在Angular 6应用程序上实现服务器端分页。

我尽最大努力遵循了documentation，但遇到以下问题，不知道如何进行。

问题

该组件从api加载并获取数据，但是直到之后才显示在渲染器上。我将通过导航到下一页再对api进行两次调用，然后到上一个。
api的第二页上的数据未被调用。

屏幕截图

初始页面加载

来回导航后

示例代码

import { Component, OnInit, Input, ChangeDetectionStrategy } from '@angular/core';
import { Http, Response } from '@angular/http';
import { ApiService } from '../../services/api.service';
import { SiteUrls } from '../../services/constants.service';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs';
import { map, tap } from 'rxjs/operators';
import 'rxjs/add/operator/delay';

interface IServerResponse {
    items: any[];
    total: number;
}

@Component({
    selector: 'app-sample',
    templateUrl: './sample.component.html',
    styleUrls: ['./sample.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush
})

export class SampleComponent implements OnInit {

    @Input() sample: any = [{}];
    total: number;
    p = 1;
    pagedItems: Observable<any[]>;
    public meta: any = {};
    constructor(private site: SiteUrls, private http: Http, private api: ApiService) {}

    ngOnInit() {
        this.getPage(1);
    }

    async getPage(page: number) {
        this.pagedItems = this.serverCall(this.sample, page)
            .pipe(tap((res) => {
                this.total = res.total;
                this.p = page;
                console.log('total', this.total, 'page', this.p, 'res', res);

            })).pipe(map((res) => res.items));
    }

    serverCall(sample: any[], page: number): Observable<IServerResponse> {
        this.getsample();
        const perPage = this.meta.per_page;
        const start = (page - 1) * perPage;
        const end = start + perPage;
        return of({
                items: sample.slice(start, end),
                total: this.meta.total
            }).delay(1000);
    }

   private getsample() {
        this.api.get('sample').subscribe((data) => {
            this.sample = data.body.data;
            this.meta = data.body.meta;
        });
    }
}

 <tbody>
                <tr *ngFor="let tran of pagedItems | async | paginate: { itemsPerPage: meta.per_page, currentPage: p, totalItems: meta.total }">
                 
                  <td>
                    {{tran.account.number}}
                  </td>
                  <td>
                    {{tran.sender.name}}
                  </td>
                  <td>
                    {{tran.recipient.name}}
                  </td>
                  <td>
                    {{tran.date | date: 'MMMM dd, yyyy'}}
                  </td>
                  <td style="background-color: antiquewhite">
                    {{tran.subtotal | currency}}
                  </td>
                  <td style="background-color: antiquewhite">
                    {{tran.fee | currency}}
                  </td>
                  <td style="background-color: antiquewhite">
                    <b>{{tran.total | currency}}</b>
                  </td>
                </tr>
              </tbody>
            </table>
            <pagination-controls (pageChange)="getPage($event)"></pagination-controls>

任何帮助将不胜感激。

更新

getsample()正在页面加载时执行，并且api返回数据。为了安全起见，我将方法更改为async，现在看起来像这样：

async getsample() {
   try {
       await this.api.get('sample').subscribe((data) => {
        this.sample = data.body.data;
        this.meta = data.body.meta;
       });
   } catch (error) {}
  }

我也实现了布兰登给出的答案，但问题仍然存在。

Answer 1

这是一个异步/等待问题。

ngOnInit() {
  this.getPage(1);
}

应为：

async ngOnInit() {
  await this.getPage(1);
}

否则，this.pagedItems将为空，直到serverCall()完成。

Answer 2

您的代码还有更多问题，其中之一是您对this.getsample();的异步调用，但是您不必等待结果。

另一件事是您无法等待观察。首先通过.toPromise()将其转换为Promise，而不是进行订阅，或者完全不使用Promise而是进行订阅（但仅在最高级别-ngOnInit处理程序中）。

使用异步/等待：

async ngOnInit() {
    await this.getsample(); // move the loading here
    await this.getPage(1);
}

async getPage(page: number) {
    const res = await this.serverCall(this.sample, page);
    this.total = res.total;
    this.p = page;
    console.log('total', this.total, 'page', this.p, 'res', res);
    this.pagedItems = res.items;
}

async serverCall(sample: any[], page: number): Promise<IServerResponse> {
    const perPage = this.meta.per_page;
    const start = (page - 1) * perPage;
    const end = start + perPage;
    return of({
        items: sample.slice(start, end),
        total: this.meta.total
    }).delay(1000).toPromise(); // convert the observable to promise
}

private async getsample() {
    const data = await this.api.get('sample').toPromise(); // and again here
    this.sample = data.body.data;
    this.meta = data.body.meta;
}

ngx-pagination：Angular 6服务器端实现

2 个答案: