在Angular 7中ngFor生成的所有元素上触发的事件 [英] Event triggered on all elements generated by ngFor in angular 7

问题描述

我有一个订购"屏幕，其中有要购买的物品清单.在每件商品的前面，我都有一个加号和减号按钮以及一个输入字段，可以在其中指定需要购买的商品数量.我正在使用* ngFor遍历数组并显示项目.甚至我正在使用此* ngFor为该项目创建加号按钮，减号按钮和输入文本字段.我正在使用2向数据绑定来获取数据并将其设置到输入字段中.

I have an Order screen where I have a list of items to buy. In front of every item, I have a plus and minus button and an input field where I can specify the quantity of the item I need to buy. I am using *ngFor to iterate through an array and display the items. Even I am creating plus button, minus button and an input text field for that item using this *ngFor. I am using 2-way data binding to get and set the data into the input field.

但是，问题是，当我单击增加按钮时，所有项目都在增加，而不是我单击加号按钮的那个特定项目.减号按钮也有同样的问题.

But, the issue is, when I click the increment button, all the items are getting incremented instead of that particular item for which I clicked the plus button. Same issue with minus button as well.

此问题是因为只有一个属性绑定到* ngFor的所有迭代.

This issue is because there is an only property which is getting bind to all the iterations of *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--;
    }

预期结果:单击该项目的+或-按钮时，应更改该项目的输入值.其他所有项目的输入值均不应更改.

Expected result: When + or - button of that item is clicked then the input value of that item should be changed. All other items input values shouldn't be changed.

推荐答案

是的，这是因为您要将相同的值 buyNumInput 绑定到所有项目.

Yes, that is because you are binding the same value buyNumInput to all the items.

一种方法是维护单独的数组以存储每个项目的值.然后，当您单击按钮时，在列表中传递项目的索引.这样您就可以相应地增加/减少它.

One way is to maintain separate array to store the values for each item. And when you click the button, pass the index of an item in the list. So that you increment/decrement it accordingly.

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>

示例

这篇关于在Angular 7中ngFor生成的所有元素上触发的事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！