Angular 4 功能仅从第二次开始工作答案

【问题标题】：Angular 4 function works only from second timeAngular 4 功能仅从第二次开始工作
【发布时间】：2018-04-25 11:41:33
【问题描述】：

我正在 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 点击 - 控制台显示“已添加！”，现在它识别出产品在数组中。

UPD 产品是一个类型的对象：

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

如何解决这个问题？

【问题讨论】：

hasOwnProperty 用于检查对象中是否存在键，您正在查看一个数组。我并不惊讶它第一次失败。我很惊讶它第二次起作用了。
@bryan60 抱歉，我更新了问题。我的产品是一个对象。所以我在对象数组中搜索键/id 值。
重点是数组检查不适用于拥有自己的属性。

标签： javascript arrays angular typescript shopping-cart

【解决方案1】：

hasOwnProperty 用于检查对象中是否存在键，您将其用于数组。改用这个：

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

【讨论】：

【解决方案2】：

试试这个：

    let idx = this.cartProducts.findIndex(elem => {
          return prod === elem
     })

     if (idx !== -1) {
          console.log("Added yet!")
     } else {
       this.cartProducts.push(prod);
      }

【讨论】：