1

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

我已尽我所能遵循文档，但我遇到了以下问题并且不知道如何继续。

问题

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

  2. 未调用 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) {}
  }

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

4

2 回答 2

1

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

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

应该：

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

否则，在完成this.pagedItems之前将为空serverCall()。

于 2018-10-17T18:23:57.637 回答
1

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

另一件事是你不能等待可观察的。首先通过而不是订阅将其转换为承诺.toPromise()，或者根本不使用承诺并订阅（但仅在最顶层 - 在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;
}
于 2018-10-17T21:02:06.503 回答