Javascript загружает больше изображений из массива по клику.Использование Firebase

Question

Я пытаюсь сделать свой сайт немного быстрее, и для этого я пытаюсь сделать кнопку, которая при каждом клике представляет больше изображений.Например: пользователь может видеть 5 изображений, а если пользователь хочет увидеть еще 5, он может, нажав на кнопку.

Так что пока только это получилось, и я действительно думаю, что это не правильный путь.

HTML ->

<ion-card *ngFor="let pic of photoList">
    <h1>{{pic?.username}}</h1>
    <h2>{{pic?.name}}</h2>
    <img src={{pic?.picture}}>
</ion-card>
    <button ion-button (click)="load()">Load More Images</button>

Js ->

load() {
    firebase.database().ref('HomeList').limitToLast(5).on('value', snapshot => {
      this.photoList = [];
      snapshot.forEach(snap => {
        this.photoList.push({
          id: snap.key,
          name: snap.val().name,
          username: snap.val().username,
          picture: snap.val().picture,
          email: snap.val().email,
          uid: snap.val().uid,
          rating: snap.val().rating
        });
        console.log(this.photoList);
        return false
      });
      return this.photoList.reverse();
    });
  }

Answer 1

так что вам нужно разбить на страницы, попробуйте использовать .startAfter (число) и .limit (число);при условии this.current = 0;устанавливается в конструкторе ();

load() {
firebase.database().ref('HomeList').startAfter(this.current).limit(5).on('value', snapshot => {
  this.photoList = [];
  snapshot.forEach(snap => {
    this.photoList.push({
      id: snap.key,
      name: snap.val().name,
      username: snap.val().username,
      picture: snap.val().picture,
      email: snap.val().email,
      uid: snap.val().uid,
      rating: snap.val().rating
    });
    console.log(this.photoList);
    this.current = this.current  + photoList.length;
    return false
  });
  return this.photoList.reverse();
});

}