如何将分页控制编号(1 2 3)更改为其他值，如'Anything1 Anything2 ...‘在ngx分页中对数组使用ngFor*？

Question

有可能取代ngx-pagination的“分页控制”吗？默认情况下，页码显示为“%1%2%3”。我想用数组中的字符串值替换它们。

<pagination-controls (pageChange)="pageChange($event)" class="my-pagination"></pagination-controls>

上面的代码将显示分页编号，如下所示

​

​

我想用数组Anything1，Anything2，Anything3中的值替换这个数字。在这里，我的数据是固定的，我知道我的页码计数及其详细信息。

Answer 1

您需要查看ngx分页的自定义模板。在自定义部分，您可以尝试在{{page.label}}之前添加您的Anything。

自定义模板示例可以在这里找到。http://michaelbromley.github.io/ngx-pagination/#/custom-template

<pagination-template #p="paginationApi"
                 [id]="config.id"
                 (pageChange)="config.currentPage = $event">


<div class="custom-pagination">
    <div class="pagination-previous" [class.disabled]="p.isFirstPage()">
        <a *ngIf="!p.isFirstPage()" (click)="p.previous()"> < </a>
    </div>

    <div *ngFor="let page of p.pages" [class.current]="p.getCurrent() === page.value">
        <a (click)="p.setCurrent(page.value)" *ngIf="p.getCurrent() !== page.value">
            <span>Anything{{ page.label }}</span>
        </a>
        <div *ngIf="p.getCurrent() === page.value">
            <span>Anything{{ page.label }}</span>
        </div>
    </div>

    <div class="pagination-next" [class.disabled]="p.isLastPage()">
        <a *ngIf="!p.isLastPage()" (click)="p.next()"> > </a>
    </div>
</div>

</pagination-template>