角度を使用すると、2つの機能をどのように切り替えることができますか？

Question

私は各列に食品の名前を持つ食料品リストアプリを作成しています。左側の列には不要な項目が表示され、右側の列には必要な項目が表示されます。現在、各列をクリックして状態を変更できます。しかし、私はこれらの2つの機能を切り替えて、現在のように列をクリックするか状態を切り替えるようにしたいと思います。

HTML：これらの関数の

<ion-row id="test" (press)="delete(list)"> 
    <ion-col class="offFoods" [ngClass]="{'grey-out': list.state == 'on'}" (tap)="additem(list)"> 
     {{list.foodname}} 
    </ion-col> 
    <ion-col class="onFoods" [ngClass]="{'grey-out': list.state == 'off'}" (tap)="unlist(list)"> 
     {{list.foodname}} 
    </ion-col> 
</ion-row> 

TS：

additem(list) { 
    var listkey = this.listKey; 
    var customlistData = { 
     category: list.category, 
     foodname: list.foodname, 
     state: "on", 
    }; 

    var user = firebase.auth().currentUser; 
    var uid = user.uid; 

    var foodid = list.$key;//Must click Banana 

    if(this.plt.is('ios')) { 
     this.taptic.selection(); 
     } 
    if (this.plt.is('android')) { 
     this.vibration.vibrate(75); 
     } 
    return firebase.database().ref('userlists' + '/' + listkey + '/' + 'list' + '/' + foodid).set(customlistData); 

} 

unlist(list) { 
    var listkey = this.listKey; 
    var customlistData = { 
     category: list.category, 
     foodname: list.foodname, 
     state: "off", 
    }; 

    var user = firebase.auth().currentUser; 
    var uid = user.uid; 

    var foodid = list.$key;//Must click Banana 

    if(this.plt.is('ios')) { 
     this.taptic.selection(); 
     } 
    if (this.plt.is('android')) { 
     this.vibration.vibrate(75); 
     } 
    return firebase.database().ref('userlists' + '/' + listkey + '/' + 'list' + '/' + foodid).set(customlistData); 
} 

Answer 1

リストがパラメータとして渡されているので、あなたは現在の状態を参照することができるので、同じようにそれを切り替える：

additem(list) { 
var listkey = this.listKey; 
var customlistData = { 
    category: list.category, 
    foodname: list.foodname, 
    state: (list.state=="off")?"on":"off, 
}; 

... 

} 

でもtoggleItem（リスト）に、この機能の名前を変更し、その後に移動でした親の行div：

<ion-row id="test" (press)="delete(list)" (tap)="toggleItem(list)"> 
... 
</ion-row> 

Answer 2

あなたは三番目のパラメータ、またはリストの各項目が何であるかの状態を示すためのブール配列を作成することができます。

次に、1つの汎用機能を使用して、使用する機能を操作します。

changeFoodState(itemIndex: number) 
    { 
     if(state[itemIndex]){ 
     additem(list[itemIndex]) 
     }else { 
     unlist(list[itemIndex]) 
     } 
    }