Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [angular] Lazy Loding danych z API
Forum PHP.pl > Forum > Przedszkole
poczatkujaca12
Witam, mam aplikację z listą userów, listę dostaje z API
ale chciałabym aby wyświetliło mi pierwszych 10, kolejnych po kliknięciu ładuj więcej userów...
i ma dołdowywać po 5 userów do listy...

da się to zrobić jakoś sensownie?

w tej chwili mam już wszystkich userów, wyświetla mi tak jak chciałam, sortuje, ale nie mogę sobie poradzić z LayLoadingiem
trueblue
To jest kwestia tego czy API umożliwia stronicowanie wyników.
poczatkujaca12
Api jest zwykłe, bezstanowe, zwraca listę w jsonie
gitbejbe
jeśli masz listę wszystkich userów to o co Ci chodzi z tym lazyloading ? Nie wiesz jak stworzyć komponent do wyświetlania tych użytkowników ?
poczatkujaca12
mam listę wszystkich userów,
wyswietlam z jsona...
i teraz muszę jakoś dołączyć lazyloading... aby wyświelić na raz 10 userów, a później po kliknięciu doładować kolejnych...
to że w jsonie pobierze mi wszystkich to nie jest problem
SmokAnalog
Poczytaj: https://jasonwatmore.com/post/2019/06/18/an...ination-example
poczatkujaca12
tylko to ma dodawać wyniki, a nie stronnicować sad.gif
SmokAnalog
Nie rozumiem. Co masz na myśli przez "dawać wyniki"? Co z nimi robisz?
dublinka
Cytat(SmokAnalog @ 7.11.2020, 11:55:15 ) *
Nie rozumiem. Co masz na myśli przez "dawać wyniki"? Co z nimi robisz?

Gosc chce wczytywanie danych partiami. Tak jak to jest na niektorych sajtach ze na samym dole jest przycisk "pokaz wiecej" i wczyytuja sie dane ale nie wszystkie tyko jakas wlasnie część. Tu chce pewnie wczytywac jak napisal po 10 userow czy costam. Dopuki sa dane bedzie mozliwos i wyswietlania partiami.
Ja to tak rozumiem
SmokAnalog
To idea podobna jak przy paginacji, tylko że dodajesz kolejne wyniki. Skoro wszystko jest od razu wczytane, to wystarczy pobrać dane raz i potem je kolejno odkrywać. Sposobów implementacji tego jest mnóstwo.
poczatkujaca12
Cytat(dublinka @ 7.11.2020, 14:18:15 ) *
Gosc chce wczytywanie danych partiami. Tak jak to jest na niektorych sajtach ze na samym dole jest przycisk "pokaz wiecej" i wczyytuja sie dane ale nie wszystkie tyko jakas wlasnie część. Tu chce pewnie wczytywac jak napisal po 10 userow czy costam. Dopuki sa dane bedzie mozliwos i wyswietlania partiami.
Ja to tak rozumiem

Dokładnie...
idea podobna jak przy pagainacji, tylko jednak przy pagainacji nie spotkałam się z tym, aby nie ukrywało wcześniejszych wyników
SmokAnalog
Nie używam Angulara, ale zrobiłem dla Ciebie przykład w Vue.js, powinno być podobnie:

[JAVASCRIPT] pobierz, plaintext
  1. const app = new Vue({
  2. el: '#app',
  3. data: {
  4. albums: [],
  5. visibleAlbums: 10,
  6. albumBatch: 10
  7. },
  8. async created() {
  9. const url = 'https://jsonplaceholder.typicode.com/albums';
  10. const response = await fetch(url);
  11. this.albums = await response.json();
  12. },
  13. template: `
  14. <div>
  15. <div v-for="album in albums.slice(0, visibleAlbums)">{{ album.title }}</div>
  16. <button v-if="visibleAlbums < albums.length" @click="visibleAlbums += albumBatch">
  17. Pokaż więcej
  18. </button>
  19. </div>
  20. `
  21. });
[JAVASCRIPT] pobierz, plaintext
poczatkujaca12
Dzięki...zrobiłam tak:
user.component.ts:
  1. export class UserComponent implements OnInit {
  2. users = [];
  3. visibleUsers: 10;
  4. newUsers: 5;
  5. constructor(private dataService: DataService) { }
  6.  
  7. ngOnInit(): void {
  8. this.dataService.sendGetRequest().subscribe((data: any[])=>{
  9. data.sort((a,b) => b.registerDate- a.registerDate);
  10. this.user = data;
  11. })
  12. }

user.component.html
  1. <div class="users" *ngFor="let user of users.slice(0, visibleUsers)">
  2. <h3>{{user.name}}</h3>
  3. </div>

data.service.ts
  1. export class DataService {
  2.  
  3. private API_SERVER = "https://link/api/users";
  4.  
  5. constructor(private httpClient: HttpClient) { }
  6.  
  7. public sendGetRequest(){
  8. return this.httpClient.get(this.API_SERVER);
  9. }
  10. }

Ale nadal wyświetla mi wszystkich userów...
SmokAnalog
Pogooglałem chwilę i nie powinno być tak?

  1. <div class="users" *ngFor="let user of users | slice:0:visibleUsers">
poczatkujaca12
Tak, dzięki biggrin.gif działa...
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.