我的 Angular2 代码有问题答案

【问题标题】：Issue with my Angular2 code我的 Angular2 代码有问题
【发布时间】：2016-05-10 15:57:06
【问题描述】：

1。我在同一页面上有几个按钮，如下所示：

2。一旦他们中的任何一个点击它就会显示下面的按钮

问题：

我有一个页面，其中包含多个 ADD 按钮，如 (1)，如果我点击第一个按钮（然后它会显示递增/递减按钮，如(2) 这是完全正常的）。然后，如果我单击第二个、第三个.... ADD 按钮，（即使我已经增加/减少了增加/减少按钮 (2) 也会从其他按钮中消失该按钮中的值）。

代码：

HTML

<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 {
     //THIS IS THE ADD BUTTON
       addTo(element){      
          this.currentEl = element;
       }

    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;
      }
    }
  }

我应该怎么做才能解决这个问题？

【问题讨论】：

什么是currentEl？它有什么价值，如何以及在哪里更新？
我已经修改过了，请查看JS部分addTo()函数的内容。
我猜应该是this.currentEl = element;?
这是真的！我刚刚从我的代码编辑器复制/粘贴代码时出错了，无论如何，我更正了它。
我想问题是您为*ngFor 创建的每个<tr> 引用相同的属性。在 *ngIf 中使用相同的 currentEl (=== list)。但我不得不承认我没有完全理解你想要完成的事情。

标签： javascript angular

【解决方案1】：

我假设您正在尝试实现一个包含物品的购物车。请参阅下面的实施。

//our root app component
import {Component} from '@angular/core'

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <b>Items:</b>
    <div *ngFor="#item of list">
      <label>{{item.name}}</label>
      <div *ngIf="hasItem(item)">
          <tr>
             <td>
               <input type="button" (click)="dec(item)" value="Down"/>
               <input type="text" [value]="item.total"/>
               <input type="button" (click)="inc(item)" value="Up"/>
            </td>
          </tr>
       </div>
      <button (click)="inc(item)" *ngIf="!hasItem(item)">ADD</button> 
    </div>
    <hr/>
    <div>
    <b>My Cart:</b>
    <div *ngFor="#item of list">
      <label>{{item.name}}</label>: <span>{{item.total}}</span>
    </div>
    </div>
  `,
  directives: []
})
export class App {
   list = [{name: "Banana", total: 0},
            {name: "Apple", total: 0},
            {name: "Kiwi", total: 0},
            {name: "Milk", total: 0}];
   
  //THIS IS THE ADD BUTTON
    inc(item)
    {
      item = this.list.filter(obj => obj.name === item.name);
      var nItem = parseInt(item[0].total);
      if(nItem < 5)
      {
        nItem +=1;
        item[0].total = nItem;
      }
    }

    dec(item)
    {
      item = this.list.filter(obj => obj.name === item.name);
      var nItem = parseInt(item[0].total);
      if(nItem > 0)
      {
        nItem -=1;
        item[0].total = nItem;
      }
    }
    
    hasItem(item) {
      console.log(this.list.filter(obj => obj.name === item.name)[0].total);
      return this.list.filter(obj => obj.name === item.name)[0].total > 0;
    }
    
  constructor() {

  }
}

完整的实现在 Plnkr 代码中：https://plnkr.co/edit/2SZCQoyMi5aOZpjYB4sL?p=preview

【讨论】：