[英]Using Angular, how can I toggle between two functions?
我正在创建一个食品杂货清单应用,每行都有食品名称。 左列显示不需要的项目,右列显示需要的项目。 目前,我可以通过单击每一列来更改状态。 但是,我想在这两个功能之间切换,以便通过像现在一样单击列或行来切换状态。
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);
}
由于list作为参数传递,因此您可以引用当前状态并像这样切换它:
additem(list) {
var listkey = this.listKey;
var customlistData = {
category: list.category,
foodname: list.foodname,
state: (list.state=="off")?"on":"off,
};
...
}
甚至可以将此函数重命名为toggleItem(list),然后将其移至父行div:
<ion-row id="test" (press)="delete(list)" (tap)="toggleItem(list)">
...
</ion-row>
您可以创建第三个参数或布尔数组以指示列表中每个项目的状态。
然后使用一个通用功能来操纵要使用的功能。
changeFoodState(itemIndex: number)
{
if(state[itemIndex]){
additem(list[itemIndex])
}else {
unlist(list[itemIndex])
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.