更新在分頁總筆數

我用我的角4的應用程序NGX-分頁和我想要做一個例子可以在這裏找到：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指向了打字稿類配置對象。只要生成更準確的估計值，我就會更新此配置中的totalItems值，但分頁組件仍使用原始估計值。我試圖給配置對象添加一個async標誌，但是這會導致錯誤。

任何幫助表示讚賞。

來源

2017-10-09 bawse

傳遞給頁面管道的配置不應該有this。你的html中的屬性只能來自你的組件類，因此你的html中的config等於你的打字稿中的this.config。嘗試更改爲

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

我能夠創建一個我認爲你將要做的事情。（http://plnkr.co/edit/GjeAP0XpbSoRU2bI7GxE?p=preview）

來源

2017-10-10 00:38:14 LLai

在您發佈此答案之前，我確實設法弄清楚了這一點，並做了與您所做的非常相似的事情。只需要將配置文件從模板中分離出來，並在服務器響應產生更好的估計時立即更新總項目的值。謝謝！ – bawse

更新在分頁總筆數

回答

相關問題