• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

question-closed Angular - problem z paginacja

Object Storage Arubacloud
0 głosów
353 wizyt
pytanie zadane 10 kwietnia 2019 w Inne języki przez rastuszek Nowicjusz (170 p.)
zamknięte 12 kwietnia 2019 przez rastuszek

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

komentarz zamknięcia: Znalazłem już odpowiedź.

Podobne pytania

0 głosów
2 odpowiedzi 514 wizyt
pytanie zadane 13 czerwca 2020 w PHP przez Bakkit Dyskutant (7,600 p.)
0 głosów
1 odpowiedź 162 wizyt
pytanie zadane 6 maja 2019 w PHP przez Whereismycode Obywatel (1,710 p.)
0 głosów
1 odpowiedź 393 wizyt
pytanie zadane 8 stycznia 2016 w JavaScript przez michal Mądrala (5,560 p.)

92,570 zapytań

141,422 odpowiedzi

319,643 komentarzy

61,958 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...