Q: Problema al almacenar objeto en array ANGULAR 7 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>



A: 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.
