I have created a custom slider where i'm trying to load element one by one as user clicks on next and previous buttons.

Links: https://stackblitz.com/edit/angular-ivy-rwuxjd?file=src/app/app.component.ts

Initially i'm loading only first value of an array in question array

  ngOnInit(): void {
    var formData=new FormData();
    formData.append("test",'test');
    this.http.post(this.baseUrl 'api/auth/fetch', formData).subscribe(result  => {
    this.questions_lists = result;
    this.temp_questions_lists.push(this.questions_lists[0]);

questions_lists contains all the result from database but temp_questions_lists contains only first element of an array, Now on next and previous buttons i'm trying to clear array and load next value from question_lists array into temp_questions_lists array.

onNext() {
    if (this.counter != this.questions_lists.length - 1) {
      this.counter  ;
      this.temp_questions_lists=[];
      this.temp_questions_lists=this.questions_lists[this.counter];
    }
  }



 onPrevious() {
    if (this.counter > 0) {
      this.counter--;
      this.temp_questions_lists=[];
      this.temp_questions_lists.push(this.questions_lists[this.counter]);
    }
  }

First time data is loaded in the slider but next time when i click on next button then i get this error :

Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed

Any solution is highly appreciated Thanks.

CodePudding user response：

You need to use .push() instead of assigning.

onNext() {
  if (this.counter != this.questions_lists.length - 1) {
  this.counter  ;
  this.temp_questions_lists=[];
  this.temp_questions_lists.push(this.questions_lists[this.counter]);
  }
}