javascript - 我如何在 ngx-pagination 的数组上使用 ngFor* 将分页控制数字（1 2 3）更改为其他值，例如“Anything1 Anything2 ...”？

Question

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

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

上面的代码将显示分页数，如

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

Answer 1

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

自定义模板示例可以在这里找到。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>