Ionic,FireBase:从收藏夹列表中删除收藏夹

时间:2020-06-06 11:53:30

标签: javascript ionic-framework firebase-realtime-database

我正在尝试解决我的当前代码,该代码允许用户将收藏夹添加到列表中并删除它们。添加它们不是问题,但是单独删除是一件令人头疼的事情。我不确定我的代码有什么问题。

favourites.page.ts

delete(item_key: any) {
    var userId = firebase.auth().currentUser.uid;
    console.log(item_key);
    return firebase.database().ref('fav/' + userId).child(item_key).remove();

  }

favourites.page.html

<ion-row>
    <ion-col>
      <ion-card class="favCard" *ngFor="let item of fav; let i = index">
        <img (click)="direct(item.name)" src="{{ item.photo }}">
        <div class="info">
          <h2 class="name">{{ item.name }}</h2>
          <h3 class="cuisine">{{ item.cuisine }}</h3>
          <ion-button class="delete" (click)="delete(item.name)">Delete</ion-button>
        </div>
      </ion-card>

    </ion-col>
  </ion-row>

Firebase数据库:

Firebase Database Image

{
  "fav" : {
    "Hp9xMZzRMDRZnbW3sg8Zhhj6OMz2" : {
      "beehoon" : {
        "country" : "Influenced by China",
        "cuisine" : "Chinese",
        "history" : "Rice vermicelli are a part of several Asian cuisines, where they are often eaten as part of a soup dish, stir-fry or salad. It also widely known in Asia by cognates of Hokkien 米粉(pronounced as bi-hun).",
        "name" : "Bee Hoon",
        "photo" : "https://firebasestorage.googleapis.com/v0/b/fyp-ionic-ad9e9.appspot.com/o/BreakfastCards%2Fbeehoon.jpg?alt=media&token=cfda6997-d2fb-49c0-b89e-e90f0519546f",
        "varieties" : "Pair up with sunny side up, luncheon meat and some good savoury Sambal chili.",
        "what" : "Also known as rice vermicelli, it is part of the rice noodles family. A loaded plate of stir-fried bee hoon piled with items such as fish cakes, sunny side ups and many more is a breakfast sight familiar to many Singaporeans."
      }
    },
    "SPl5PRkl6sYgn7KsAqqs9LhlhwB2" : {
      "beehoon" : {
        "country" : "Influenced by China",
        "cuisine" : "Chinese",
        "history" : "Rice vermicelli are a part of several Asian cuisines, where they are often eaten as part of a soup dish, stir-fry or salad. It also widely known in Asia by cognates of Hokkien 米粉(pronounced as bi-hun).",
        "name" : "Bee Hoon",
        "photo" : "https://firebasestorage.googleapis.com/v0/b/fyp-ionic-ad9e9.appspot.com/o/BreakfastCards%2Fbeehoon.jpg?alt=media&token=cfda6997-d2fb-49c0-b89e-e90f0519546f",
        "varieties" : "Pair up with sunny side up, luncheon meat and some good savoury Sambal chili.",
        "what" : "Also known as rice vermicelli, it is part of the rice noodles family. A loaded plate of stir-fried bee hoon piled with items such as fish cakes, sunny side ups and many more is a breakfast sight familiar to many Singaporeans."
      },
      "toast" : {
        "country" : "Influenced by China, Malaysia",
        "history" : "It was believed that Kaya toast originated with Hainanese people who worked on British ships as cooks. Eventually, these cooks settled in Singapore and started selling their food to the  locals. Wanting to create some uniqueness, the locals replaced the British jams with local coconut spread.",
        "name" : "Kaya Toast",
        "photo" : "https://firebasestorage.googleapis.com/v0/b/fyp-ionic-ad9e9.appspot.com/o/BreakfastCards%2Ftoast.jpg?alt=media&token=73e1a793-3002-4db2-97fb-4e3271ec2e93",
        "varieties" : "Cracker kaya toast, steamed kaya toast, French kaya toast",
        "what" : "Kaya toast is a well-known breakfast snack in Singapore and Malaysia. Kaya toast is prepared with kaya (also known as coconut jam) and butter, generally served on toast. It is considered a breakfast staple and remains popular in Singapore. "
      }
    }
  }
}

在此图像中,我试图删除“ beehoon”,但是,每当我按Delete键时,都不会从列表和数据库中将其删除。因此,它仍然在收藏列表中。

非常感谢您的帮助。谢谢

1 个答案:

答案 0 :(得分:0)

要从数据库中删除节点,必须在引用其确切路径的引用上调用remove()。因此,如果要删除JSON中第一个孩子下的beehoon节点,则必须在/fav/Hp9xMZzRMDRZnbW3sg8Zhhj6OMz2/beehoon上调用remove。

当用户单击以删除项目时,您呼叫delete(item.name)。因此,在您的JSON的第一个节点中,它将转换为Bee Hoon。然后在delete函数中将变为:

firebase.database().ref('fav/' + userId).child("Bee Hoon").remove();

但是没有节点/fav/Hp9xMZzRMDRZnbW3sg8Zhhj6OMz2/Bee Hoon,因为该节点称为/fav/Hp9xMZzRMDRZnbW3sg8Zhhj6OMz2/beehoon

我不确定您如何填充fav中使用的let item of fav,但是您需要确保每个项目还包含其节点。然后,您可以像调用delete一样,在对delete(item.$key)的调用中将该键注入HTML。