如何解决分页控件 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 举报,一经查实,本站将立刻删除。