Creando el Home

3/25
Recursos

Aportes 2

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

hi, hice el siguiente cambio al getAll del servicio de products, porqu茅 no estaba identificando que los valores limit y offset

getAll(limit?: number, offset?: number) {
    let params = new HttpParams();
   //Inicio de los cambios
    const temp_limit = limit as number;
    const temp_offset = offset as number;

    if(temp_limit?.toString().length > 0 && temp_offset?.toString().length > 0) {
      params = params.set('limit', temp_limit);
      params = params.set('offset', temp_offset);
    }
   //Fin de los cambios
    
    return this.http.get<Product[]>(this.apiUrl, { params, context: checkTime() })
    .pipe(
      retry(3),
      map(products => products.map(item => {
        return {
          ...item,
          taxes: .19 * item.price
        }
      }))
    );
  }

creo que lo que estaba sucediendo en la implementaci贸n anterior, es que al ser los valore 鈥渙pcionales鈥 el if lo toma siempre como undefined as铆 los enviemos y nunca se har谩 el set de los params 馃榿

Esta es mi soluci贸n al reto, en el componente products.component.ts he agregado una variable que me va a servir como Output con una funci贸n que ser谩 el que va a emitir el evento

@Output() onLoadMore: EventEmitter<string> = new EventEmitter<string>();

loadMore() {
    this.onLoadMore.emit();
}

Ya desde products.component.html cuando se le de click al button vamos a llamar a la funci贸n loadMore()

<button (click)="loadMore()">Load more</button>

Para finalizar desde home.component.html solo tenemos que leer dicho evento y mandar a llamar la l贸gica para cargar m谩s del home.component.ts

<app-products [products]="products" (onLoadMore)="loadMore()"></app-products>
loadMore(): void {
    this.productsService.getAll(this.limit, this.offset)
      .subscribe(data => {
        this.products = this.products.concat(data.filter(product => product.images.length > 0));
        this.offset += this.limit;
      });
  }

Para finalizar en el servicio de products, no se hace una correcta asignaci贸n de los params, entonces si quieren que les funcione correctamente solo deben de cambiar en la funci贸n getAll lo siguiente:

let params = new HttpParams();
if (limit != undefined && offset != undefined) {
   params = params.set('limit', limit);
   params = params.set('offset', offset);
}