javascript - 使用 Angular，如何在两个功能之间切换？

Question

我正在创建一个杂货 list 应用程序，每行都有一个食品名称。左栏显示不需要的项目，右栏显示需要的项目。目前我可以通过单击每一列来更改状态。但是，我想在这两个功能之间切换，以便通过像现在一样单击列或仅单击行来切换状态。

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(list)，然后将其移动到父行div:

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