Событие сработало на всех элементах, сгенерированных ngFor в angular 7

Question

У меня есть экран заказа, где у меня есть список товаров для покупки.Перед каждым предметом у меня есть кнопка «плюс» и «минус» и поле ввода, где я могу указать количество товара, которое мне нужно купить.Я использую * ngFor для перебора массива и отображения элементов.Даже я создаю кнопку плюс, кнопку минус и текстовое поле ввода для этого элемента, используя эту * ngFor.Я использую двухстороннюю привязку данных для получения и установки данных в поле ввода.

Но проблема в том, что, когда я нажимаю кнопку увеличения, все элементы увеличиваются, а не этот конкретный элемент длякоторый я нажал кнопку плюс.Та же проблема и с кнопкой «минус».

Эта проблема связана с тем, что существует единственное свойство, которое связывается со всеми итерациями * ngFor.

    <div class="row mt-2 mb-2" *ngFor="let item of listItems; let i = index">
            <div class="col-sm-6">   
                <img src= "{{ item.imgUrl }}" alt="Item Img">
                <span> {{ item.name.split(' ').slice(0,2).join(' ').replace(":", "").replace(",", "") }}</span>             
            </div>
            <div class="col-sm-6 m-auto">
              <button id="minus-image" class="minus mr-2" (click)="onMinusClick()"><img src="../../assets/icon/minus.png" alt="minus Img"></button>
              <input type="text" id="buyNumInput" class="buyNum" [(ngModel)]="buyNumInput">
              <button id="plus-image" class="plus ml-2" (click)="onPlusClick()"><img src="../../assets/icon/plus.png" alt="plus Img"></button>
              <span class="price ml-3 text-right"> {{ item.price }} gold</span> 
            </div>
    </div>

в файле .ts:

    buyNumInput = 0;
    onPlusClick(){
    this.buyNumInput++;
    }

    onMinusClick(){
      this.buyNumInput--;
    }

Ожидаемый результат: При нажатии кнопки + или - этого элемента следует изменить входное значение этого элемента.Все остальные входные значения не должны изменяться.

Answer 1

Кажется, у вас есть только одно числовое свойство в вашем компоненте, поэтому оно разделяется между элементами.Одним из решений может быть: https://stackblitz.com/edit/angular-bbkun4
Я рекомендую выполнять все тяжелые операции форматирования строк внутри файла .ts (метод 'getDisplayName'), а не непосредственно внутри шаблона.

машинописная часть:

getDisplayName(item) {
    return item.name;
}

onPlusClick(item) {
    item.count++;
}

onMinusClick(item) {
    item.count = item.count === 0 ? 0 : item.count - 1;
}

onInputChanged(item, amount) {
    item.count = amount;
}

и html:

<div *ngFor="let item of listItems; let i = index">
    <div>
        <img src="{{ item.imgUrl }}" alt="Item Img" />
        <span> {{ getDisplayName(item) }}</span>
    </div>
    <div>
        <button id="minus-image" (click)="onMinusClick(item)">
            <img src="../../assets/icon/minus.png" alt="minus Img" />
        </button>
        <input
            type="number"
            id="buyNumInput"
            [ngModel]="item.count"
            (ngModelChange)="onInputChanged(item, $event)"
        />
        <button id="plus-image" (click)="onPlusClick(item)">
            <img src="../../assets/icon/plus.png" alt="plus Img" />
        </button>
        {{ item.price }} gold
    </div>
</div>

Answer 2

Да, это потому, что вы привязываете одно и то же значение buyNumInput ко всем элементам.

Один из способов - сохранить отдельный массив для хранения значений для каждого элемента.И когда вы нажимаете кнопку, передайте индекс элемента в списке.Так что вы увеличиваете / уменьшаете его соответственно.

buyNumInput = [];

ngOnInit() {
   for(let i=0; i<this.listItems.length; i++){
        this.buyNumInput.push(0);
   }
}

onPlusClick(i){
   this.buyNumInput[i]++;
}

onMinusClick(i){
   this.buyNumInput[i]--;
}

HTML-код

<div class="row mt-2 mb-2" *ngFor="let item of listItems; let i = index">
    <div class="col-sm-6">
        <img src= "{{ item.imgUrl }}" alt="Item Img">
            <span> {{ item.name.split(' ').slice(0,2).join(' ').replace(":", "").replace(",", "") }}</span>             
  </div>
  <div class="col-sm-6 m-auto">
    <button id="minus-image" class="minus mr-2" (click)="onMinusClick(i)"><img src="../../assets/icon/minus.png" alt="minus Img"></button>
    <input type="text" id="buyNumInput" class="buyNum" [(ngModel)]="buyNumInput[i]">
    <button id="plus-image" class="plus ml-2" (click)="onPlusClick(i)"><img src="../../assets/icon/plus.png" alt="plus Img"></button>
    <span class="price ml-3 text-right"> {{ item.price }} gold</span> 
</div>

Пример