Как работать с трубками и разбиением на страницы с помощью Angular2?

Question

Я делаю свой собственный компонент для отображения данных в таблице с разбиением на страницы, сортировкой и фильтром. Все работает до сих пор так хорошо, но когда я использовал фильтр и разбивка на страницы активна, я не знаю, как обновить разбиение на страницы, потому что труба освежает источник напрямую. Пример:

<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> 

Если вы видите, что я делаю пагинацию в моем компоненте, но при использовании фильтра, я не знаю, как обновить данные, которые поступают из моего компонента.

Любая идея? Благодаря!

Answer 1

я нашел легко просто удалили трубы и использовать функцию в моем компоненте, так что я использовал трубы на входе, теперь он выглядит следующим образом:

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

и снимите трубку с ngFor , с этим я получу фильтр и обновляю данные из функции напрямую.

Если кто-то знает лучшее решение, поделитесь им.