将数据追加到Observable Angular 2中

Question

I am trying to load gif's from the API based on search parameter 20 at a time and once I reach the bottom of the page I need to load 20 more. I used observable for this.However, I am not sure how to append the data to my Observable. Every time I scroll to the bottom of the page first 20 results are removed and only new 20 are showing up. Can you please help.

HTML Code:

<span *ngIf="afterSubmit" (scroll)="onScroll()">
              <a *ngFor="let gif of observableGifs | async"> 
                <iframe [src]="sanitizer.bypassSecurityTrustResourceUrl(gif)"></iframe>
              </a>
            </span>

Typescript Code:

this.observableGifs = this.gifservice.getGifs(this.gifForm.value,this.offset); ---> My API data comes from this method which I am assigning it to Observable.

    this.observableGifs
      .subscribe((gifs) => { this.gifs = gifs }
        }
      );

Is there a way to append new data into the same "this.observableGifs" observable. Please suggest.

Answer 1

Try this

this.observableGifs =this.gifservice.getGifs(this.gifForm.value,this.offset); 

this.observableGifs
.subscribe((gifs) => { this.gifs = this.gifs.concat(gifs) }
}

);