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

[ANGULAR] NgFor wyświetlenie kolejnych elementów

VPS Starter Arubacloud
+2 głosów
226 wizyt
pytanie zadane 2 maja 2023 w JavaScript przez mm Użytkownik (890 p.)

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?

1 odpowiedź

+1 głos
odpowiedź 2 maja 2023 przez Wiciorny Ekspert (269,120 p.)

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ą 

komentarz 2 maja 2023 przez mm Użytkownik (890 p.)

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.

Podobne pytania

+1 głos
1 odpowiedź 77 wizyt
pytanie zadane 1 kwietnia 2023 w Inne języki przez mm Użytkownik (890 p.)
+2 głosów
1 odpowiedź 380 wizyt
pytanie zadane 5 maja 2023 w JavaScript przez mm Użytkownik (890 p.)
+2 głosów
1 odpowiedź 239 wizyt
pytanie zadane 23 kwietnia 2023 w JavaScript przez mm Użytkownik (890 p.)

92,454 zapytań

141,263 odpowiedzi

319,099 komentarzy

61,854 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

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 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!

...