分页控件 itemsPerPage 不起作用

问题描述

嗨，我在 ngrx 中使用 angular。我用 ngrx 制作动态表。如果数组中有 10 个数据，我想每页显示 2 个项目。当我访问组件时，调用服务器并获得 2 个项目。然后如果我单击下一步按钮，它将调用服务器以获取新的 2 个项目。但是在我的代码中，当我获得更多新的 2 个项目时，组件在第二页中显示 4 个项目。如果我单击最后一页，则意味着我获得了所有 10 的数据，分页运行良好。我不知道是什么问题

Image.component.html

<div
      class="row card-margin"
      *ngFor="
        let image of images
          | paginate
            : {
                itemsPerPage: itemPerPage,currentPage: p,totalItems: imageCounts
              };
        let i = index
      "
      [routerLink]="['/admin/image',image.id]"
    >
   <div class="text-center mt-3">
     <pagination-controls
       (click)="absoluteIndex(p - 1)"
       (pageChange)="p = $event"
     ></pagination-controls>
   </div>

Image.component.ts

export class ImageComponent implements OnInit {
  images: Image[] = [];
  p: number = 1; // current page for pagination
  itemPerPage = 2;
  users: User[] = [];
  imageCounts: number = 10;

  constructor(
    private store: Store<fromApp.AppState>
  ) {}

  ngOnInit(): void {
    this.getimagesSubscription = this.store
      .select("images")
      .pipe(map((imagesstate) => imagesstate.images))
      .subscribe((images: any) => {
        this.images = images;
      });
  }

  absoluteIndex(indexOnPage: number) {
    let newIndex = 2 * indexOnPage;

    
    if (indexOnPage >= this.images.length / 2) {
      this.store.dispatch(
        new ImagesActions.AddImagesIndex({
          indexnum: newIndex,imageLength: this.images.length,})
      );
    } else {
      console.log("nothing to do");
    }
  }

}

Image.reducer.ts

import { Image } from "../../../Image/models/image.model";

import * as ImagesActions from "./images.action";

export interface State {
  images: Image[];
}

const initialState: State = {
  images: [],};

export function imagesReducer(
  state = initialState,action: ImagesActions.ImagesActions
) {
  switch (action.type) {
    case ImagesActions.GET_IMAGES:
      return {
        ...state,images: [...action.payload["images"]],};
    case ImagesActions.ADD_IMAGES:
      return {
        ...state,images: [...state.images,...action.payload["images"]],};
    default:
      return state;
  }
}

Image.effect.ts

fetchImages$ = createEffect(
    () => {
      return this.actions$.pipe(
        ofType(ImagesActions.FETCH_IMAGES),map((action: ImagesActions.FetchImages) => action.payload),switchMap((indexnum) => {
          console.log(indexnum);
          let body = {
            number: indexnum,};
          return this.http.post<Image[]>(this.globalUrl + "/admin/image",body);
        }),map((images) => {
          return {
            ...(images ? images : []),};
        }),map((images) => {
          return new ImagesActions.Getimages(images);
        })
      );
    }
  );

  addImages$ = createEffect(() => {
    return this.actions$.pipe(
      ofType(ImagesActions.ADD_IMAGES_INDEX),map((action: ImagesActions.AddImages) => action.payload),switchMap((indexnum) => {
        const body = {
          number: indexnum,};
        return this.http.post<Image[]>(this.globalUrl + "/admin/image",body);
      }),map((images) => {
        return {
          ...images,};
      }),map((images) => {
        return new ImagesActions.AddImages(images);
      })
    );
  });

解决方法

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

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

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