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

我发现很容易删除Pipe并在我自己的组件中使用一个函数，所以我在输入中使用了Pipe，现在它看起来像这样：

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

并从ngFor中删除管道，我将获得过滤器并直接从函数中更新数据。

如果有人知道更好的解决方案，请分享。

如何使用Angular2管道和分页？

1 个答案: