Question

目前，我有一个“添加”按钮，一旦点击，它会显示一个新的 div ，使最终用户能够增加/减少添加到的项目数量购物车（想想亚马逊购物车）

问题：当我点击“添加”按钮时，我可以增加特定项目的数量;但是，一旦我增加了一个项目的数量，我会转到另一个项目，一旦我点击“添加”，我已经增加其数量的上一个项目就会消失!!

代码：

HTML：运行4个元素列表的for循环

<div *ngFor="#item of list">
      <div *ngIf="currentEl === list">
        <tr>
           <td>
             <input type="button" (click)="dec(elem)" value="Down"/>
             <input type="text" #elem value="0"/>
             <input type="button" (click)="inc(elem)" value="Up"/>
          </td>
        </tr>
       </div>
       </div>
<div (click)="addTo(list)" *ngIf="currentEl !== list">ADD</div>

JS：

    let list = ["Banana", "Apple", "Kiwi", "Milk"];

    export class App {

           addTo(element){      
              this.currentDish = mem;
           }

        inc(elem)
        {
          var nItem = parseInt(elem.value);
          if(nItem < 5)
          {
            nItem +=1;
            elem.value = nItem;
          }
        }

        dec(elem)
        {
          var nItem = parseInt(elem.value);
          if(nItem > 0)
          {
            nItem -=1;
            elem.value = nItem;
          }
        }
      }

我的想法：我认为我的代码存在逻辑问题，遗憾的是，我无法弄明白。

我希望你能提供帮助，如果你这样做，请告诉我一个简短的解释，以了解正在发生的事情和学习内容。

Answer 1

您的每个输入都具有相同的ID：

<input type="text" #elem value="0"/>

#elem应该是一个唯一值，当您的列表中有多个项目时，它就不是。

相反，在item上运行方法并将输入绑定到变量：

<td>
    <input type="button" (click)="dec(item)" value="Down"/>
    <input id="elem_{{item.id}}" [(ngModel)]="item.value" type="text"/>
    <input type="button" (click)="inc(item)" value="Up"/>
</td>

和

inc(item) {
    if(item.value < 5) {
        item.value += 1;
    }
}

这假设您的item列表由至少包含两个字段的对象组成：id和value，例如（您实际上并不需要使用此字段）代码，仅供参考）：

export interface Item {
    id: number;
    value: number;
    name: string;
    // Etc...
}

所以你的列表声明是：

let list = [
    {
        id: 0,
        value: 0,
        name: 'Banana'
    },
    {
        id: 1,
        value: 0,
        name: 'Apple'
    },
    // etc...
];

现在，只要您点击增加项目的数量，您的inc()函数就需要增加value的{{1}}参数，而Angular会连接点，更改输入框的值（以及显示值的任何其他实例）。

纯！而Angular的主要特色之一。

ngIf - 我的Angular2代码

1 个答案: