Question

我在Angular 4应用程序中使用ngx-pagination，我可以在此处找到我尝试做的示例：http://michaelbromley.github.io/ngx-pagination/#/server-paging

但是，我想要的功能有一点不同。该示例显示了一个服务器调用，其中返回了响应中的项目总数：

function serverCall(meals: string[], page: number): Observable<IServerResponse> {
const perPage = 10;
const start = (page - 1) * perPage;
const end = start + perPage;

return Observable
    .of({
        items: meals.slice(start, end),
        total: 100
    }).delay(1000);

}

然后使用此total来确定要在分页组件中显示的页数。但是，我正在进行的服务器调用只返回结果可能具有的项目数的估计值（因为我逐页查询服务器）。＆＃34;估计＆＃34;每次页面更改都会越来越准确，所以理想情况下我希望能够异步更新totalItems属性，以便相应地调整页面数。

我尝试过这样的事情：

<ul class="meal-list">
    <li *ngFor="let meal of asyncMeals | async | paginate: this.config">
        {{ meal }}
    </li>
</ul>

<div class="has-text-centered">
    <div class="spinner" [ngClass]="{ 'hidden': !loading }"></div>
    <pagination-controls (pageChange)="getPage($event)" id="server"></pagination-controls>
</div>

其中this.config指向typescript类中的配置对象。一旦生成更准确的估计，我就会更新此配置中的totalItems值，但是，分页组件会继续使用原始估计值。我试图在配置对象中添加async标志，但这会导致错误。

感谢任何帮助。

Answer 1

传入分页管道的配置不应该有this。您的html中的属性仅来自您的组件类，因此您的html中的config等同于您的打字稿中的this.config。尝试更改为

<li *ngFor="let meal of asyncMeals | async | paginate: config">
    {{ meal }}
</li>

我能够创造一个我认为你想要的东西。（http://plnkr.co/edit/GjeAP0XpbSoRU2bI7GxE?p=preview）

更新分页中的总项目

1 个答案: