Angular 服务器端分页，ngrx 和带有express的nodejs，我得到堆栈之间的差异索引

Question

我以角度实现了服务器端分页，它工作正常，问题是我最初在 1 上设置的页面，但 mat-paginator 从索引 2 开始。 当我更改页面时它工作正常，我想知道如何解决这个错误。

这是nodejs中的分页方法：

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>

知道我在哪里遗漏了问题吗？

最初的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，因此所有内容都已加载。 然后我将 + 1 添加到 this.pageSize = pageEvent.pageSize ，所以我加载了第 2 页，但是当我进入第 1 页时工作正常。

Answer 1

您可以从 .ts 文件中删除变量

count$: Observable<number>
page = 1
pageSize = 3

在.ts文件中添加以下声明

import { PageEvent, MatPaginator } from '@angular/material/paginator';
import { Component, ViewChild, AfterViewInit } from '@angular/core'

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

    @ViewChild(MatPaginator) paginator: MatPaginator;

    ngOnInit(): void {}

    ngAfterViewInit(): void {
       this.handlePageChange();
       this.equipments$ = this.store.select(getEquipments);
       this.isLoading$ = this.store.select(getIsLoading);
       this.store.select(getEquipmentsCount)
          .subscribe( data => this.paginator.length = data );
    }

    handlePageChange() {
       this.store.dispatch(
          EquipmentPageActions.loadEquipments({
              page: this.paginator.pageIndex + 1,
              limit: this.paginator.pageSize
          })
        );
    }

pageIndex 属性是从 0 开始的，所以我将其增加 1

在html中

<mat-paginator
            [pageSizeOptions]="[3, 6, 9]"
            [showFirstLastButtons]="true"
            (page)="handlePageChange()">
</mat-paginator>

希望对你有帮助。

问候。

Answer 2

我已经成功解决了在 ngOnInit 中添加 + 1 到页面的问题

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