角度4函数仅在第二次时起作用

我正在Angular 4中创建一个购物车,希望检查是否有新产品 戳 但存在于 cartProducts阵列 . 这是我的组件:

import { Component, OnInit } from '@angular/core';
import { Router } from "@angular/router";
import { ProductsService } from '../service/products.service';

@Component({
  selector: 'app-store',
  templateUrl: './store.component.html',
  styleUrls: ['./store.component.css']
})
export class StoreComponent implements OnInit {

  itemCount: number;
  cartProducts: any = [];
  productsList = [];

  constructor( private _products: ProductsService ) { }

  ngOnInit() {
    this.itemCount = this.cartProducts.length;
    this._products.product.subscribe(res => this.cartProducts = res);
    this._products.updateProducts(this.cartProducts);
    this._products.getProducts().subscribe(data => this.productsList = data);
  }

  addToCart(prod){
    this.cartProducts.hasOwnProperty(prod.id) ? console.log("Added yet!") : this.cartProducts.push(prod);
    console.log(this.cartProducts)
  }

}

我的 添加到Cart 通过单击触发的函数可以正常工作,但只能从第二次启动。

单击一次-我们在空白处添加产品 cartProducts公司 数组,产品已添加

2单击-虽然产品已添加,但会再次添加,现在阵列中有两个相同的产品。我得到了两个相同产品的阵列。

3单击-控制台显示“已添加!”,现在它认识到产品已经在阵列中了。

UPD 产品是以下类型的对象:

{
  "id" : "1",
  "title" : "Title 1",
  "color" : "white"
}

如何解决问题?