Angular2コードに関する問題

Question

を：あなたは以下を参照することができますように私は、同じページ上のいくつかのボタンがあります。それらのいずれかをクリックしたら、それは下のボタンを示している

問題：

私がクリックした場合いくつかは、（）に似ボタンを追加含まれているページを持っています（）のような増分/減分ボタンが完全に正常であることを示しています）。次に、2番目のボタンをクリックすると、3番目の.... 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; 
     } 
    } 
    } 

私は問題を解決するために何をすべき？

Answer 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