Witam serdecznie.
Próbuje wykonać automatyczną paginacje do projektu mojej galerii na przykładzie zamieszczonym na stronie: http://michaelbromley.github.io/ngx-pagination/#/
Niestety nie wiem co wpisać w miejscu, które oznaczyłem "?????". W obu tych miejscach powinno być wpisane to samo. Coś w stylu "setCurrentPage(i)", może "[i]" oraz gdzieś wywołanie {{i+1}}. Musi gdzieś się znajdować odwołanie do tej funkcji z pliku .ts ustawiającej określoną stronę. Na różne sposoby próbowałem lecz nic mi z tego nie wychodzi.
<span *ngFor="let item of numberOfPages | paginate: { currentPage: ?????, itemsPerPage: 3}; index as i "></span>
<pagination-controls (pageChange)="????? = $event"></pagination-controls>
Rozumiem to wszystko albo tylko tak mi się wydaje. W każdym bądź razie proszę o pomoc.
Tutaj jest cały kod z mojego pliku galleries.ts:
import { Component, OnInit } from '@angular/core';
import {Galleries} from '../../../constants/galleries.constant';
import {IGallery} from '../../../interfaces/IGallery';
import {HttpClient, HttpHeaders} from '@angular/common/http';
@Component({
selector: 'app-galleries',
templateUrl: './galleries.component.html',
styleUrls: ['./galleries.component.scss']
})
export class GalleriesComponent implements OnInit {
title: string;
description: string;
galleries: IGallery[];
searchValue: string;
httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': '52'
})
};
limit:number;
currentPage:number;
start:number;
end:number;
numberOfPages:any=[];
constructor(private http: HttpClient) {}
ngOnInit() {
this.searchValue = '';
this.currentPage = parseInt(localStorage.getItem('galleryPage')) || 0;
this.setCurrentPage(this.currentPage);
this.setCurrentPage();
this.title = 'Interesujące zwierzęta';
this.description = 'Tutaj możemy znaleźć zdjęcia wielu ciekawych zwierząt!';
this.http.get('http://project.usagi.pl/gallery',
this.httpOptions).toPromise().then((response: IGallery[])=> {console.log('success', response);
this.galleries = response;
this.numberOfPages = Array(Math.ceil(this.galleries.length / this.limit)).fill(1);
}, (errResponse) => {console.log('error', errResponse);
});
}
setSearchValue($event) {
console.log($event);
this.searchValue = $event;
}
exportGalleries() {
Galleries.forEach((gallery: IGallery) => {
delete(gallery.galleryId);
this.http.post('http://project.usagi.pl/gallery', gallery,
this.httpOptions).toPromise().then((response: IGallery) => {console.log('success', response);
this.galleries.push(response);
this.numberOfPages = Array(Math.ceil(this.galleries.length / this.limit)).fill(1);
}, (errResponse) => {console.log('error', errResponse);
});
});
}
removeGalleries() {
this.galleries.forEach((gallery: IGallery) => {
this.http.post('http://project.usagi.pl/gallery/delete/' + gallery.galleryId, {},
this.httpOptions).toPromise().then((response) => {
this.numberOfPages = Array(Math.ceil(this.galleries.length / this.limit)).fill(1);
this.galleries.splice(0, 1);console.log('success', response);}, (errResponse) => {console.log('error', errResponse);
});
});
}
removeGallery(galleryId) {
const index = this.galleries.findIndex((gallery: IGallery) => gallery.galleryId === galleryId);
this.http.post('http://project.usagi.pl/gallery/delete/' + galleryId, {}, this.httpOptions).toPromise().then((response) => {
this.numberOfPages = Array(Math.ceil(this.galleries.length / this.limit)).fill(1);
this.galleries.splice(index, 1);console.log('success', response);}, (errResponse) => {console.log('error', errResponse);
});
}
setCurrentPage(page=0) {
this.limit = 3;
this.currentPage = page;
this.start = this.currentPage * this.limit;
this.end = this.start + 3;
localStorage.setItem('galleryPage', this.currentPage.toString());
}
}
Tutaj znajduje się link do mojej całej galerii: https://github.com/rastuszek/Projekt-galerii-w-Angular
Byłbym bardzo wdzięczny gdyby ktoś mi pomógł w jakikolwiek sposób. Pozdrawiam