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ą