如何为 ngx-pagination 添加样式？

问题描述

我正在使用 ngx-pagination 并尝试为我的分页添加一些样式，但我无法做到。我曾尝试通过 ngx-template 和 pagination-control 进行分页，但这是不可能的。

我想更改“后退”和“下一个”按钮，并为分页提供特定样式。我已经看到通过 pagination-control 这是不可能的，但通过 pagination-template 是可以的。

我有以下代码：

<div *ngIf="cards.length > 0" class="text">
    <div *ngFor="let card of cards | paginate: { itemsPerPage: 5,currentPage: p.getCurrent()}">
        <app-mymyv-card [card]="card"></app-mymyv-card>
        <div id="card-container" class="container p-2 animate__animated animate__fadeIn slow">
            <div id="card-global-container" class="mb-3 div_card_global">
                <div class="text-right">
                    <a class="blue_link" [routerLink]="['/card_view']" (click)="saveCard(card)"><b>{{card.comments}}
                            {{keys.cards_txt_comments}}</b></a>
                </div>
            </div>
        </div>
    </div>
</div>
<pagination-template #p="paginationApi"
                     (pageChange)="pageChange.emit($event)"
                     (pageBoundsCorrection)="pageBoundsCorrection.emit($event)">

        <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>{{ page.label }}</span>
            </a>
            <div *ngIf="p.getCurrent() === page.value">
                <span>{{ page.label }}</span>
            </div>
        </div>

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

但我明白了：

我没有错误，但它不起作用。 在第二个 div 中，我已将 currentPage: p 更改为 currentPage: p.getCurrent()，因为我收到此错误：

作为 p 的值如下：p: number = 1;

我的组件如下：

export class MyComponent implements OnInit {

  p: number = 1;

  @input() id!: string;
  @input() maxSize!: number;
  @Output() pageChange!: EventEmitter<number>;
  @Output() pageBoundsCorrection!: EventEmitter<number>;

  
  constructor() {
     ...soME CODE...
  }

  ngOnInit(): void {
  }

如何设置分页样式？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）