标签: ngx-pagination

如何更改ngx-paginationCSS？我尝试过：

:host /deep/ .ngx-pagination {
  padding-left: 0px;
}

:host /deep/.ngx-pagination .current,
.btn-info {
  background: #17a2b8 !important;
  border: transparent;
  border-radius: 20px;
}

:host /deep/.ngx-pagination .current:hover {
  background: #17a2b8 !important;
  border-radius: 20px;
  border: transparent;
}

在组件 .css 内部，但没有任何变化，我收到此警告

[弃用] CSS 动态配置文件中不再支持 /deep/ 组合器。它现在实际上是无操作的，就像一个后代组合器一样。/deep/组合器将被移除，并且在M65处无效。你应该删除它。有关更多详细信息，请参阅https://www.chromestatus.com/features/4964279606312960 。

我该如何解决这个问题？感谢您的时间！

编辑：

.html

  <div class="clearfix">
    <pagination-controls (pageChange)="p = $event"></pagination-controls>
  </div>

.css

.clearfix {
  position: relative;
  right: 35%;
  left: 35%;
  font-size: 14px;
}

编辑2：（渲染后的html）

<div class="clearfix">
    <pagination-controls nextlabel="Next" previouslabel="Previous" ng-reflect-previous-label="Previous"
      ng-reflect-next-label="Next">
      <pagination-template ng-reflect-max-size="7">
        <!--bindings={
    "ng-reflect-ng-if": "true" …

我有一个ngx-pagination的自定义分页模板实现,它正常工作.但是,当我尝试使用带分页的过滤器管道时,分页会中断:分页控件保持与应用过滤器之前相同,并且过滤后的数据集不再分页(11个项目出现在屏幕上而不是10个) .页面底部的分页控件在过滤时仍然可见,但不会影响过滤后的数据,即不会更改页面.

组件HTML

<task-manager-record *ngFor="let record of filteredDraftRecords | draftFilter: draftFilterArg | paginate: getPaginationOptions(tabIndex); let i = index;" [record]="record"></oir-task-manager-record>
<div class="totalRecords">
    <label>Total </label>
    {{ (filteredDraftRecords | draftFilter:draftFilterArg)?.length }}
</div>
<pagination *ngIf="(filteredDraftRecords | draftFilter:draftFilterArg)?.length > getPaginationOptions(tabIndex).itemsPerPage"
          (pageChange)="onChangePage($event)"
          [options]="getPaginationOptions(tabIndex)">
</pagination>

组件ts

import { Component, OnInit } from '@angular/core';
import { RecordViewModel } from '../models/app.models';
import { MotionStatus } from '../models/enum.model';
import { PaginationOptions } from 'proceduralsystem-clientcomponents';
import { SelectItem } from '@motions/motions.model';
import { TaskManagerService } from './task-manager.service';

@Component({
  selector: 'task-manager',
  templateUrl: …

我正在使用 ngx-pagination 和服务器端分页。因此，用户输入一些搜索条件并点击搜索按钮。这会导致调用服务器以获取结果的第一页。在客户端，我有这个代码来显示分页控件

<div class="col-sm-4">
  <pagination-controls (pageChange)="getPage($event)" 
                       id="serverPaging">
  </pagination-controls>
</div>

<div *ngFor="let result of results | paginate: { 
  id:'serverPaging', 
  itemsPerPage: 10, 
  currentPage: p, 
  totalItems: totalResultCount }">
  ...
</div>

这按预期工作。显示第一页并突出显示分页栏中的“1”。

比方说，用户现在点击最后一页。这将突出显示分页栏中的最后一页。到目前为止，一切都按预期工作。

现在用户通过再次单击“搜索”按钮重新执行搜索。这将重新呈现搜索结果。由于是新搜索，服务器返回第一页。但是，分页栏仍然突出显示了最后一页。

如何将分页栏重置为某些操作的第一页，例如重新执行搜索。

角度版本：4.2.4 ngx-分页版本：3.0.0