如何使用 ngx-bootstrap 分頁到達特定頁面

Question

我有一個需要在哪里實現的查詢：How to gotTo a specific page using ngx-bootstrap pagination by input page number to some input field。

這是以下代碼片段：

***Template:***


<div class="row">
  <div class="col-xs-12 col-12">
    <div class="content-wrapper">
      <p class="content-item" *ngFor="let content of returnedArray">{{content}}</p>
    </div>
    <pagination [totalItems]="contentArray.length" (pageChanged)="pageChanged($event)"></pagination>
  </div>
</div>



**.ts file**
import { Component, OnInit } from '@angular/core';
import { PageChangedEvent } from 'ngx-bootstrap/pagination';

@Component({
    // eslint-disable-next-line @angular-eslint/component-selector
    selector: 'demo-pagination-content-switching',
    templateUrl: './content-switching.html',
    styles: [`
.content-wrapper {
border: 1px solid #ddd;
border-radius: 4px;
padding-left: 10px;
margin-bottom: 10px;
}
`]
})
export class DemoPaginationContentSwitchingComponent implements OnInit {
    contentArray = new Array(90).fill('');
    returnedArray?: string[];

    ngOnInit(): void {
        this.contentArray = this.contentArray.map((v: string, i: number) => `Content line ${i + 1}`);
        this.returnedArray = this.contentArray.slice(0, 10);
    }

    pageChanged(event: PageChangedEvent): void {
        const startItem = (event.page - 1) * event.itemsPerPage;
        const endItem = event.page * event.itemsPerPage;
        this.returnedArray = this.contentArray.slice(startItem, endItem);
    }
}

任何幫助表示贊賞！

提前致謝

Answer 1

根據文件； 您可以將pagination與[(ngModel)]綁定以使其與特定實例成員保持同步。

在您的DemoPaginationContentSwitchingComponent聲明一個變量currentPage並將其與 Angular Bootstraps 的pagination組件綁定，如下所示

<pagination [totalItems]="contentArray.length (pageChanged)="pageChanged($event)" [(ngModel)]="currentPage"></pagination>

現在添加您想要控制pagination的input ，您可以監聽(changed)此input的事件並相應地設置currentPage值，或者簡單地添加一個button來執行此操作。

無論哪種方式，您都需要驗證此輸入以避免來自pagination組件的錯誤。