ngx分页: Angular 6服务器端实现
ngx分页: Angular 6服务器端实现
提问于 2018-10-18 01:15:04
我正在尝试使用ngx-pagination在我的Angular 6应用程序上实现服务器端分页。
我已经尽我所能地遵循了documentation，但我遇到了以下问题，不知道如何继续。
Problems
- 该组件从api加载并获取数据，但直到之后的才会在render上显示。我会通过导航到下一页，然后再导航到上一页，对该api再进行两次调用。未调用api的第2页上的
- 数据。
截图
初始页面加载
来回导航后
示例代码
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) {}
}我也实现了Brandon给出的答案，但问题仍然存在。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-10-18 05:02:07
您的代码还有更多的问题，其中之一是您对this.getsample();的异步调用，但是您不需要等待结果。
另一件事是，你不能等待观察者。通过.toPromise()将其转换为promise first，而不是订阅，或者根本不使用promises而改为订阅(但只在最顶层-在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;
}Stack Overflow用户
发布于 2018-10-18 02:23:58
这是一个异步/等待问题。
ngOnInit() {
this.getPage(1);
}应该是：
async ngOnInit() {
await this.getPage(1);
}否则，在serverCall()完成之前，this.pagedItems将为null。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52860320
复制相关文章
相似问题