[ANGULAR] NgFor wyświetlenie kolejnych elementów

Question

Cześć,

Mam pytanie, jak w Angularze wyświetlać za pomocą pętli Ngfor wybrane elementy tablicy. Pobieram dane z bazy danych za pomocą funkcji w backendzie. Mam odpowiednią funkcję w moim komponencie w Angularze i w pliku HTML, i chcę wyświetlać najpierw pierwszy element z tablicy po naciśnięciu przycisku kolejny. Jak to zaimplementować? Na razie wyświetlają mi się wszystkie elementy pobrane na raz.

<div class="pytania" *ngFor="let question of questions">
    <h2>{{question.question}}</h2>
</div>

Co muszę zmienić lub dodać w tej pętli?

Answer 1

Popatrz sobie tutaj 
https://angular.io/api/common/NgFor

rozumiem że questions- to jest tablica.
Każdy element w tablicy czyli question, zawiera właściwość question? 

Skorzystaj z jakiegoś iterowanego rozwiązania, albo w momencie przycisku zwracaj element z poziomu komponentu, forem tego nie za bardzo zrobisz, gdyz on automatycznie będzie wyświetlać wszystkie elementy jeśli zrobisz coś na zasadzie tego jak powyżej. 

Najlepszym rozwiązaniem jest opieranie się o indeks, ktory należy wyświetlić 
 

<div class="pytania">
  <h2>{{questions[currentIndex].question}}</h2>
  <button (click)="nextQuestion()">Kolejny</button>
</div>

Dodać globalny index do komponentu, jeśli nie chcesz tego zrobić z poziomu np html.
 

 currentIndex = 0;
 questions: any[]; // twoje pytania

a funkcja nextQuestion w twoim komponencie mogłaby wyglądać następująco:

 nextQuestion() {
    if (this.currentIndex === this.questions.length - 1) {
      this.currentIndex = 0;
    } else {
      this.currentIndex++;
    }
  }

innym sposobem bez indeksu w komponencie możesz przekazać indeks z HTML do funkcji nextQuestion()

<div class="pytania" *ngFor="let question of questions; let i = index">
  <h2>{{question[currentIndex].question}}</h2>
  <button (click)="nextQuestion(i)">Kolejny</button>
</div>

Wtedy w komponencie  możesz zdefiniować metodę nextQuestion(index: number), która będzie przyjmować przekazany indeks jako argument.
 

nextQuestion(index: number) {
    this.currentIndex = index;
  }

Ostatecznie mozesz po indeksie zwracac element tablicy tą funkcją 

Comments

Moje questions jest zadeklarowane w komponencie w następujący sposób:

questions : Questions[]

Ponieważ mam klasę Questions gdzie są  zadeklarowane te elementy, które są pobierane z bazy danych, mam jeszcze dodatkową metodę z "get" gdzie właśnie jest zadeklarowana ta tablica Questions[], w której właśnie zapisuje się to co przesyłane jest z bazy.