更新分页中的总项目

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 然后用于确定在分页组件中显示多少页。但是，我正在进行的服务器调用仅返回结果可能具有的项目数的估计值（因为我正在逐页查询服务器）。随着页面的每次更改，“估计”变得越来越准确，因此理想情况下，我希望能够异步更新 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>

我能够创建一个我认为你想要的 plnkr。 (http://plnkr.co/edit/GjeAP0XpbSoRU2bI7GxE?p=preview)