0

Estoy intentando mostrar un listado de 7675 registros obtenido de este web API: https://boletusapi.azurewebsites.net/api/ofertas

que tarda unos 17 segundos en devolver los resultados

resultados desde el web api

Pero cuando consulto este mismo web API desde mi front de angular en local

front

Se queda aqui eternamente y no recibo nada

esoera

Se que recupera de alguna manera los registros por que tengo esto por consola

ngOnInit(): void {
this.allOfertasConPropiedadesMapadas$
  .subscribe(
    data => {
      this.ofertas = data;
      
    }
    , err => console.error(err)
    , () => {
      console.log('ofertas', this.ofertas.length);
      console.log('la ultima', this.ofertas[this.ofertas.length-1]);
    }
  );

la ultima

Pero en mis templates los valores no se rellenan y cuando usaba datos de prueba con solo unas decenas de registros no tenia ningún problema así que asumo que está relacionado con el numero de resultados a devolver pero como veo que si que se ha rellenado this.ofertas no lo entiendo la verdad

Alguna idea por favor?

Salu2

1
  • El problema no tiene nada que ver con Angular. Solo se te está avisando que la petición aún no finaliza, después de finalizar la advertencia desaparece. En todo caso es problema local, hice las pruebas y todo finaliza en orden.
    – Lobos
    Commented el 2 feb. 2022 a las 14:22

1 respuesta 1

0

Los resultados están ahí, el problema son la cantidad de registros que quieres mostrar en el navegador. Esta operación debe ser sumamente costosa y por ende no se procesa. Para minimizar el impacto renderiza solo una fracción de los elementos a la vez. Un ejemplo rápido puede ser este:

todasLasOfertas = []
ngOnInit(): void {

    this.allOfertasConPropiedadesMapadas$
      .subscribe(
        data => {
          this.todasLasOfertas = data
          //Limitamos a mostrar solo 30 registros. 
          this.ofertas = data.slice(0, 30)

        }, err => console.error(err), () => {
          console.log('ofertas', this.ofertas.length);
          console.log('la ultima', this.ofertas[this.ofertas.length - 1]);
        }
      );

Esta solución va de la mano con un paginador pero, presumiblemente, la api que estas consultando debería permitir limitar la cantidad de datos a obtener. Revisa bien la documentación y talvez puedas lograr esto con una url tipo: https://boletusapi.azurewebsites.net/api/ofertas?limite=30

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.