javascript - Angular 4函数仅从第二次开始起作用

我正在Angular 4中创建一个购物车，并想检查cartProducts数组中是否还存在新产品prod。
这是我的组件：

零件

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)
  }

}

单击触发的我的addToCart函数可以正常工作，但只能从第二次开始。

1单击-我们在空的cartProducts数组中添加产品，产品被添加

2单击-尽管添加了产品，但再次添加了产品，现在阵列中有两个相同的产品。我有两个相同产品的阵列。

3单击-控制台显示“ Added yet！”，现在它可以识别出该产品已在阵列中。

UPD
该产品是以下类型的对象：

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

如何解决这个问题？

最佳答案

hasOwnProperty用于检查对象中是否存在键，您正在将其用于数组。使用此代替：

 addToCart(prod){
    this.cartProducts.indexOf(prod) > -1 ? console.log("Added yet!") : this.cartProducts.push(prod);
    console.log(this.cartProducts)
  }