我在angular中实现了服务器端的分页，它工作得很好，问题是我最初设置在1上的页面，但mat-paginator从索引2开始。当我改变网页，它的工作正常，我想知道如何解决这个错误。
这是nodejs中的paginate方法：

paginate() {
    const page = this.queryString.page * 1 || 1
    const limit = this.queryString.limit * 1 || 100
    const skip = (page - 1) * limit

    this.query = this.query.skip(skip).limit(limit)

    return this
  }

字符串
这是组件：

import { Component } from '@angular/core'
import { Equipment } from '../../models/equipment.model'
import { DialogService } from 'src/app/shared/services/dialog.service'
import { Store } from '@ngrx/store'
import {
    getEquipments,
    getEquipmentsCount,
    getIsLoading,
    State
} from '../../state'
import { Observable } from 'rxjs'
import { EquipmentPageActions } from '../../state/actions'
import { PageEvent } from '@angular/material/paginator'

@Component({
    selector: 'app-equipments-list',
    templateUrl: './equipments-list.component.html',
    styleUrls: ['./equipments-list.component.css']
})
export class EquipmentsListComponent {
    isLoading$: Observable<boolean>
    equipments$: Observable<Equipment[]>
    count$: Observable<number>
    page = 1
    pageSize = 3

    constructor(
        private dialogService: DialogService,
        private store: Store<State>
    ) {}

    ngOnInit(): void {
        this.store.dispatch(
            EquipmentPageActions.loadEquipments({
                page: this.page,
                limit: this.pageSize
            })
        )
        this.equipments$ = this.store.select(getEquipments)
        this.isLoading$ = this.store.select(getIsLoading)
        this.count$ = this.store.select(getEquipmentsCount)
    }

    onDeleteEquipment(id: string): void {
        this.dialogService
            .confirmDialog({
                title: 'DELETE EQUIPMENT',
                message: 'Are you sure you want to delete?',
                confirmText: 'No',
                cancelText: 'Yes'
            })
            .subscribe((confirm) => {
                if (confirm) {
                    this.store.dispatch(
                        EquipmentPageActions.deleteEquipment({ id })
                    )
                }
            })
    }

    handlePageChange(pageEvent: PageEvent): void {
        this.page = pageEvent.pageIndex
        this.pageSize = pageEvent.pageSize
        this.store.dispatch(
            EquipmentPageActions.loadEquipments({
                page: this.page + 1,
                limit: this.pageSize
            })
        )
    }
}

型
这是模板：

<div
    class="d-flex flex-column align-items-center justify-content-center h-100"
    *ngIf="isLoading$ | async"
>
    <div class="spinner-border" role="status">
        <span>Loading...</span>
    </div>
</div>

<div class="container" *ngIf="!(isLoading$ | async)">
    <div class="row">
        <div class="col-xs-12">
            <h1 class="fw-bold text-center">Equipments</h1>
            <div class="mb-2">
                <a
                    class="btn btn-primary btn-sm"
                    type="button"
                    [routerLink]="'add'"
                    >Add</a
                >
            </div>
            <table class="table shadow-lg table-responsive">
                <thead>
                    <tr>
                        <th scope="col">Name</th>
                        <th scope="col">Power</th>
                        <th scope="col">Installation</th>
                        <th scope="col">Actions</th>
                    </tr>
                </thead>
                <tbody *ngIf="equipments$ | async as equipments">
                    <tr scope="row" *ngFor="let equip of equipments">
                        <td>{{ equip.name }}</td>
                        <td>{{ equip.powerRequirement }}</td>
                        <td class="text-nowrap">
                            {{ equip.installationDate | date : 'dd-MM-yyyy' }}
                        </td>
                        <td class="text-nowrap">
                            <button
                                class="btn btn-secondary btn-sm me-1"
                                [routerLink]="[equip._id]"
                            >
                                View
                            </button>
                            <a
                                class="btn btn-primary btn-sm me-1"
                                type="button"
                                [routerLink]="[equip._id + '/edit']"
                                >Edit</a
                            >
                            <button
                                class="btn btn-danger btn-sm"
                                type="button"
                                (click)="onDeleteEquipment(equip._id)"
                            >
                                Delete
                            </button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="text-center" *ngIf="equipments$ | async as equipments">
                <p *ngIf="equipments.length === 0">No equipments</p>
            </div>
            <mat-paginator
                [length]="count$ | async"
                [pageSize]="pageSize"
                [pageSizeOptions]="[3, 6, 9]"
                [showFirstLastButtons]="true"
                [pageIndex]="page"
                (page)="handlePageChange($event)"
            >
            </mat-paginator>
        </div>
    </div>
</div>

型
你知道我在哪里错过了这个问题吗？x1c 0d1x的数据
最初的handlePageChange是：

handlePageChange(pageEvent: PageEvent): void {
        this.page = pageEvent.pageIndex
        this.pageSize = pageEvent.pageSize
        this.store.dispatch(
            EquipmentPageActions.loadEquipments({
                page: this.page,
                limit: this.pageSize
            })
        )
    }

型
页面将从1开始，但服务器的结果为0，因此所有内容都已加载。然后我在this.pageSize = pageEvent.pageSize中添加了+ 1，所以我加载了第2页，但是当我转到第1页时，效果很好。