0

我正在使用ngx-pagination并尝试为我的分页添加一些样式，但我做不到。我试图通过 ngx-template 和 through 进行分页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了 for 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 {
  }

如何设置分页样式？

4

0 回答 0