如何使用Angular2管道和分頁工作？

我正在做我自己的組件，用分頁，排序和過濾在表格中顯示數據。一切工作到目前爲止非常好，但是當我使用過濾器和分頁激活時，我不知道如何刷新分頁，因爲管道直接刷新源。例如：如何使用Angular2管道和分頁工作？

<div class="form-inline"> 

    <div class="form-group"> 
     <div class="input-group"> 
      <div class="input-group-addon"><i class="glyphicon glyphicon-search pull-left"></i></div> 
       <input type="text" placeholder="Employee name" class="form-control" [(ngModel)]="filter"> 
       <div class="input-group-addon"><i class="glyphicon glyphicon-user pull-right"></i></div> 
      </div> 
     </div> 
    </div> 

    <table class="table table-hover table-striped table-sortable"> 
     <thead> 
     <tr> 
      <th *ngFor="let column of table.columns" [class]="selectedClass(column.variable)" (click)="changeSorting(column.variable)"> 
       {{column.display}} 
      </th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr *ngFor="let object of table.data | orderBy : convertSorting() | search:{filter:filter}"> 
      <td *ngFor="let column of table.columns"> 
       {{object[column.variable]}} 
      </td> 
     </tr> 
     </tbody> 
    </table> 
    <ul class="pager" *ngIf="pager.visible"> 
     <li><a href="#" (click)="changePage('decrease')"><i class="fa fa-icon fa-chevron-left"></i></a></li> 
     <li *ngFor="let page of pager.pages; let i = index" [class]="pageSelected(i + 1)"><a href="#" (click)="changePage(i + 1)" > {{i + 1}} </a></li> 
     <li><a href="#" (click)="changePage('increase')"><i class="fa fa-icon fa-chevron-right"></i></a></li> 
    </ul>     
</div>

如果你看到我做的分頁在我的成分，但使用過濾器時，我不知道如何刷新來自我的組件的數據。

有什麼想法？謝謝！

來源

2016-09-23 damianfabian

單提示，排序前搜索。可排序的列表將更小:) – mxii

感謝您的提示，是的，現在我正在做這樣的事情，剛剛從過濾器得到最終結果。 – damianfabian

我發現很容易只是爲了去除鋼管，在我自己的組件使用的功能，所以我是用管道輸入，現在它看起來像這樣：

<input type="text" placeholder="Employee name" class="form-control" [(ngModel)]="filter" (keyup)="updateTable(filter)">

，並從ngFor疏通管道，我會得到過濾器並直接從函數中更新數據。

如果有人知道更好的解決方案，請分享它。

來源

2016-09-23 07:30:52 damianfabian

如何使用Angular2管道和分頁工作？

回答

相關問題