Creé un control deslizante personalizado en el que intento cargar elementos uno por uno cuando el usuario hace clic en los botones siguiente y anterior.

Enlaces: https://stackblitz.com/edit/angular-ivy-rwuxjd?file=src%2Fapp%2Fapp.component.ts

Inicialmente estoy cargando solo el primer valor de una matriz en la matriz de preguntas

 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 contiene todos los resultados de la base de datos, pero temp_questions_lists contiene solo el primer elemento de una matriz. Ahora, en los botones siguiente y anterior, intento borrar la matriz y cargar el siguiente valor de la matriz question_lists en la matriz temp_questions_lists .

 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]); } }

La primera vez que se cargan los datos en el control deslizante, pero la próxima vez que hago clic en el botón siguiente, aparece este error:

Error: error al intentar diferenciar '[objeto Objeto]'. Solo se permiten arreglos e iterables

Cualquier solución es muy apreciada Gracias.