1

hace poco que estoy tratando con Angular y me encuentro con un problema que no consigo resolver. Quiero que cada vez que haga click en el botón, se añadan elementos a un array. Cuando toco sobre el mismo elemento se almacena bien en el array, pero cuando toco sobre otro se borra y empieza a contar desde nuevo.Dejo aquí mi código:

EDIT: Hola, he probado lo que me recomendáis pero no funciona... He podido observar que me crea un array de productos, si voy metiendo del mismo producto el array va creciendo correctamente. Pero si meto otro producto, el array empieza de nuevo. ¿Qué pasa si vuelvo a meter el mismo producto que la primera vez? Para mi sorpresa lo que hace es que sigue metiendo productos en el primer array. La conclusión es que crea un array para cada grupo del mismo producto, en lugar de unificarse. El problema es que no encuentro la manera de acceder a esos arrays....

import { Component, OnInit, Input } from '@angular/core';
import { Product } from '../../models/product';
import { ProductService } from '../../services/product.service';
import { Observable } from 'rxjs/Rx';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'ng-gallery-product',
  templateUrl: './gallery-product.component.html',
  styleUrls: ['./gallery-product.component.css']
})
export class GalleryProductComponent implements OnInit {
  @Input() product: Product;
  public quantity: number = 0;
  public productAdd: Object[] = [];

  constructor(private productService: ProductService) { }

  ngOnInit() {
  }

  quantityReset() {
    this.quantity = 0;
    return '';
  }

  addProductToCart(prod: string, id: string) {
    this.productAdd.push(this.product);
    console.log(this.productAdd);
    //el console.log devuelve el array de objetos y acumula siempre que sea el mismo, pero cuando hago click sobre otro elemento, se borra el array y empieza de nuevo...
  }


}
 <div class="row">
  <a href="#" id="btnver" class="ml-3 btn btn-primary" [routerLink]="['/product/', product.id]">Ver<i
      class="ml-2 far fa-eye"></i></a>
  <button id="btncarro" (click)="addProductToCart(product.id, quantity)" class="ml-3 btn btn-primary">Añadir al
    carro<i class="ml-2 fas fa-cart-plus"></i></button>
</div>

3
  • addProductToCart(prod: string, id: string) { } ¿Con qué fin le estás pasando a tu función prod, id sino lo utilizas? Proba con public productAdd: Array<Product> si lo que necesitas hacer es un array de productos,
    – Lud Osorio
    Commented el 18 feb. 2019 a las 23:08
  • Y si no fuera un arreglo de Objetos si no un arreglo normal, lo has intentado? public productAdd: = []; Commented el 18 feb. 2019 a las 23:09
  • Hola, he probado pero no funciona... He podido observar que me crea un array de productos, si voy metiendo del mismo producto el array va creciendo correctamente. Pero si meto otro producto, el array empieza de nuevo. ¿Qué pasa si vuelvo a meter el mismo producto que la primera vez? Para mi sorpresa lo que hace es que sigue metiendo productos en el primer array. La conclusión es que crea un array para cada grupo del mismo producto, en lugar de unificarse. El problema es que no encuentro la manera de acceder a esos arrays.... Commented el 19 feb. 2019 a las 8:31

1 respuesta 1

1

Deduzco de tu explicación que tienes un componente (del que no se muestra el código) que muestra una lista de productos. Cada uno de esos elementos es un GalleryProductComponent, por lo que tienes múltiples instancias de esta clase.

Por tanto no es que se borre del array nada, sino que estás viendo (¿depurando?) distintas instancias, cada una con un array para un único producto.

La solución es no tener un array: este GalleryProductComponent debería ser lo que se llama un componente tonto: no tiene estado y la lógica es mínima. Lo único que tiene que hacer es emitir un evento "me han seleccionado" (mediante un atributo @Output()) para que el componente padre, que contiene a todos los productos, guarde los productos seleccionados.

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.