I want to implement infinite scroll. When i scroll down the page the new fetched objects just replace previous fetched objects, but i want that i can scroll down infinite and new objects append on scroll not just replace previous objects. How can i accomplish it? Full code - https://github.com/KristersgCode/test

export class AppComponent implements OnInit {
  throttle = 0;
  distance = 2;
  page = 1;
  li: any;
  lis: any = [];

  constructor(private characterService: CharacterService) {}
  ngOnInit(): void {
    this.characterService.getCharacters(this.page).subscribe((Response) => {
      console.log(Response);
      this.li = Response;
      this.lis = this.li.results;
    });
  }
  onScrollDown(): void {
this.page  = 1;
this.ngOnInit();
 }
}

Service file

export class CharacterService {
  constructor(private http: HttpClient) {}

  getCharacters(page: number) {
    return this.http.get(
      `https://rickandmortyapi.com/api/character?page=${page}&per_page=20`
    );
  }
}

CodePudding user response：

Simple and old one to concat result with existing one.

this.lis = this.lis.concat(this.li.results);

Hope this help. Thanks!