Question

我正在使用角4做购物车。在餐厅描述部分列出了许多推荐食品。每个食品都有一个增量或减量按钮，用于确定订购的商品数量。这是下面的图片链接： -

https://i.stack.imgur.com/uat4Z.jpg

如果我点击“+”，则每个金额都会增加。

增加一个项目后，结果如下： -

https://i.stack.imgur.com/r3edI.jpg

restaurant.component.html代码： -

<div class="res_list">
            <div class="list_col" *ngFor="let popular of popularSection">
                    <a href="javascript:void(0)">
                        <span class="rhover">
                            <figure>
                                <img src="../../../assets/images/rest_prof.jpg">
                                <figcaption>
                                    {{ popular.item_desc }}
                                </figcaption>
                            </figure>
                            <div class="item-decs-info">
                                <h5><span [ngClass]="{'ft-nonveg' : popular.item_veg , 'ft-veg' : !popular.item_veg }" class="food-type"></span> {{ popular.item_name }}</h5>
                                <span class="sub_info">Quick Bites</span>
                            </div>                                
                            <div class="row">
                                <div class="col-7">
                                    <p class="item-main-price">{{ popular.item_price }}</p>
                                </div>
                                <div class="col-5">
                                    <div class="cart-action hide-btn fr">
                                        <button class="add-cart" type="button">ADD</button>
                                        <div class="cart-i-q">
                                            <input  
                                            readonly="" 
                                            [value]="noOfItem" 
                                            type="text">
                                            <button (click)="incOrDec()" disabled="" type="button" class="add-i-b valdown">-</button>
                                            <button 
                                            (click)="incOrDec()" 
                                            type="button" 
                                            class="add-i-b valup">+</button>
                                        </div>
                                        <span *ngIf="popular.choice" class="customised-txt">Customisable</span>
                                    </div>
                                </div>
                            </div>
                        </span>
                    </a>
                </div>
        </div>

如何解决这个问题？

Answer 1

您的代码问题是：您将相同的变量绑定到所有“项目数”文本框。因此，所有文本框都显示相同的值。

每个方法都应该有适当的名称。有一种方法可以递增，另一种方法可以递减。

有两种方法可以解决这个问题。

创建popular-item（或提供任何名称）component，其中每个item包含商品图片，价格，数量等。将popularItem传递给此组件。即。

在此popular-item组件中，设置变量noOfItem，以确保每个商品/产品都有单独的noOfItem。

当您通过单击“+”或“ - ”更改项目计数时，此项目的计数仅为chnages。

在count数组中的每个项目中都有一个属性popularSection。然后在increment方法中增加该项目的计数。

即。

<div class="list_col" *ngFor="let popularItem of popularSection">
  ... blah blah blah
   <div class="cart-i-q">
      <input readonly=""  [value]="noOfItem" type="text">
      <button (click)="decreament(popularItem)" disabled="" type="button" class="add-i-b valdown">-</button>
        <button (click)="increament(popularItem)"  type="button" class="add-i-b valup">+</button>
   </div>
... blah blah blah
</div>

在组件中，

increament(popularItem) {
  popularItem.count++;
}

increament(popularItem) {
  popularItem.count--;
}

Answer 2

使用此逻辑并且易于递增和递减

<button (click)="popular.item_price = popular.item_price + 1" type="button" class="add-i-b valup">+</button>

<button (click)="popular.item_price = popular.item_price - 1" type="button" class="add-i-b valup">-</button>

许多项目中点击时特定项目的增量

2 个答案: