Question

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

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

此问题是因为只有一个属性绑定到* 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

是的，这是因为您要将相同的值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>

Example

Answer 2

似乎您的组件中只有一个number属性，因此可以在各项之间共享。解决方案之一可能是：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>

在Angular 7中ngFor生成的所有元素上触发的事件

2 个答案: