如何从下面的购物车项目列表中获得独立的计数值？

Question

我有这样的html代码。

<div *ngFor="let item of items">
      <div class="card col-xs-12 col-sm-12 col-md-12  col-lg-12 col-xl-12">
        <div class="  col-xs-12 col-sm-12 col-md-12  col-lg-12 col-xl-12" style="display:flex">
          <div class="my-2 mx-10 col-xs-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
            <h5 class="item-heading">{{item.title}}</h5>
            <p>{{item.description}}</p>
          </div>
          <div class="my-4 col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
            <strong>&euro;{{item.Price}} </strong>
          </div>
          <div class="mx-10 col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xl-2 p-0 m-0 d-flex " >
            <button class="Increment p-0 " (click)="Increment({{item.count}})" >+</button>
            <button class="Decrement p-0 " (click)="Decrement({{item.count}})">-</button>
            <!-- <div class="middle-part"><input  class="quantity" class=" col-6 quantity" type="number"></div> -->
            <input class=" col-5 py-3 quantity" type="number" value="{{item.count}}">
          </div>
        </div>
      </div>
    </div>

在我的ts里

import { Component, OnInit } from '@angular/core';
import { CartItemsList,cartItemsArray } from './CartItemsList';
@Component({
  selector: 'app-cart-items-component',
  templateUrl: './cart-items-component.component.html',
  styleUrls: ['./cart-items-component.component.css']
})
export class CartItemsComponentComponent implements OnInit {
  count:number=0;
  items = cartItemsArray;
  item = this.items[0];
  constructor() { }
  ngOnInit() {
  }
  Increment(item)
  {
    item.count +=1;
  }
  Decrement(item)
  {
    item.count -=1;
  }
}

现在，当我执行此操作时，所有的计数值都会增加或减少。我需要存储每个项目的个别计数值。

在cartItemsList.ts中，代码如下所示。

export class CartItemsList
{
    title:string;
    Price:number;
    description:string;
    count:number;
}
export const cartItemsArray: CartItemsList[] = [
    { title: 'Boulette Speciale', Price: 150 , description:'A product' , count:0},
    { title: 'Campagne Supreme', Price: 220 , description:'B product'  , count:0 },
    { title: 'Boulette Speciale', Price: 250 , description:'C product' , count:0 },
    { title: 'Campagne Supreme', Price: 300 , description:'D product'  , count:0 }
  ];

Answer 1

我的建议是将一个item对象传递给函数并更新该对象的计数。

html文件中的

<button class="Increment p-0 " (click)="Increment(item)" >+</button>

中的.ts文件

Increment(item)
{
   item.count +=1;
}