При нажатии на кнопку, меняется кол-во всех товаров а не одного

Question

  <table class="table table-hover table-dark table-bordered table-sm text-center">
                            <thead>
                                <tr class="bg-success">
                                    <th>№</th>
                                    <th>Наименование товара</th>
                                    <th>Краткое описание</th>
                                    <th>Стоимость товара</th>
                                    <th>Количество товара</th>
                                    <th>Итого</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="br-primary" 
                                  *ngFor="let work of dismantlingWorks; let ind=index">
                                    <td>{{ ind+1 }}</td>
                                    <td>{{ work["name"] }}</td>
                                    <td>{{ work["unit"] }}</td>
                                    <td>{{ work["price"] | currency:"USD" }}</td>
                                    <td>
                                      <!-- Напрямую обращение к сервису и вызов в шаблоне методов increase и decrease   -->
                                      <button class="btn btnCount" type="button" (click)="decrease(work, $event)"> - </button>
                                      <span class="span">{{ counter }}</span>
                                      <button class="btn btnCount" type="button" (click)="increase(work, $event)"> + </button>
                                      <!-- значение cartCounterServices со значением counter -->
                                    </td>
                                    <td>{{ ( counter * work["price"]) | currency:"USD" }}
                                        
                                        <!-- <button class="plus-btn" (click)="plus(item)" type="button"> + </button> -->
                                    </td>
                                    <!-- <td>{{ (item.quantity * item.price) | currency:"USD" }}</td>--> -->
                                </tr>
                                <td colspan="5">Итого к оплате</td>
                                <td colspan="1">{{ grandTotal | currency:"USD":true:"1.2-2" }}</td>
                            </tbody>
                        </table>

TS:

increase(item: any, event: any) {
this.counter++


}

decrease(item: any, event: any) {
  if (this.counter > 0) {
    this.counter--
  }
}

был нажат + только у первого товара второй увеличился автоматически, как это исправить?

Answer 1

Я бы предложил сделать так: В модель данных dismantlingWorks добавить поле count с дефолтным значением 1.

А в функции счетчика добавить еще передачу товара. В html будет так

<button (click)="decrease(work)"> - </button>

В коде счетчиков так

increase(item: any) {
    item.count++;
}

decrease(item: any) {
   if (item.count > 0) {
     item.count--
   }
}

Ошибка в том, что вы обращаетесь к глобальному счетчику, а не к счетчику объекта.

БЛОГ НА HUSL

При нажатии на кнопку, меняется кол-во всех товаров а не одного

Ответы (1 шт):