从 Firebase 中的用户特定集合中删除文档

Question

我是 Firebase 的新手，正在从事一个小项目以更好地熟悉 Firebase/Firestore。现在我正在使用 Firebase 身份验证来处理注册和登录用户。登录后，将为我在 MySQL 中创建的用户显示事件列表，并通过对 Spring 的 http 调用连接到我的 Angular/Ionic 应用程序。（指定我这样做也是为了学习一些Java/Spring。）

我能够显示事件并单击以将事件添加到用户特定的 "my events" 列表。我按照这里的教程进行操作：https://javebratt.com/ionic-firebase-tutorial-object/

我在从 Firestore 的用户列表中删除事件时遇到问题。当用户 select 在 [=44] 的 *ngFor 模板中使用 "event.id" 添加到 "my events" 的事件时，我能够看到 Firestore 添加的特定事件 ID =].

无论我做什么，我都无法让删除功能正常工作。它实际上是在说它运行成功了，但是什么都没有被删除。我相信我在 .doc() 和 .delete() 方法之间遗漏了一些东西，但是 Google 文档非常模糊（或者我没有正确理解它们）。

我试过指定路径，例如

.doc(`/users/${user.uid}/myEventList/${id}`

但这不起作用。非常感谢任何帮助和见解。

到目前为止，这是打印成功消息的内容：

 removeEvent() {
    this.myEventListRef
      .doc()
      .delete()
      .then(function() {
        console.log("Document successfully deleted!");
      })
      .catch(function(error) {
        console.error("Error removing document: ", error);
      });
  }

这是我的完整 service.ts：

import { Injectable } from "@angular/core";
import * as firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";
import { Observable } from "rxjs";
import { HttpClient } from "@angular/common/http";
import { ToastController } from "@ionic/angular";

@Injectable({
  providedIn: "root"
})
export class EventService {
  public myEventListRef: firebase.firestore.CollectionReference;
  public myEventsList: Observable<Event[]>;
  public currentEvent: any = {};

  constructor(
    public toastController: ToastController,
    private http: HttpClient
  ) {
    firebase.auth().onAuthStateChanged(user => {
      if (user) {
        this.myEventListRef = firebase
          .firestore()
          .collection(`/users/${user.uid}/myEventList`);
      }
    });
  }

  getEventList(): firebase.firestore.CollectionReference {
    return this.myEventListRef;
  }

  copyEvent(
    eventName: string,
    eventPrice: number,
    eventLocation: string,
    eventType: string
  ): Promise<firebase.firestore.DocumentReference> {
    return this.myEventListRef.add({
      name: eventName,
      price: eventPrice,
      location: eventLocation,
      type: eventType
    });
  }
  removeEvent() {
    this.myEventListRef
      .doc()
      .delete()
      .then(function() {
        console.log("Document successfully deleted!");
      })
      .catch(function(error) {
        console.error("Error removing document: ", error);
      });
  }

  getEventsObservable(): Observable<any> {
    return this.http.get("http://localhost:8080/events/eventslistX");
  }

  async addToMyEventsToast() {
    const toast = await this.toastController.create({
      color: "secondary",
      message: "Added to 'My Events'.",
      duration: 2000
    });
    toast.present();
  }
}

my-events.ts 其中用户特定事件显示在 select 来自初始事件列表的事件之后：

import { Component, OnInit } from "@angular/core";
import { EventService } from "../services/event.service";

import { Observable } from "rxjs";

@Component({
  selector: "app-my-events",
  templateUrl: "./my-events.page.html",
  styleUrls: ["./my-events.page.scss"]
})
export class MyEventsPage implements OnInit {
  public myEventsList: Array<any>;
  public currentEvent: any = {};

  constructor(private eventService: EventService) {}

  ngOnInit() {
    this.eventService
      .getEventList()
      .get()
      .then(eventListSnapshot => {
        this.myEventsList = [];
        eventListSnapshot.forEach(snap => {
          this.myEventsList.push({
            id: snap.id,
            name: snap.data().name,
            price: snap.data().price,
            location: snap.data().location,
            type: snap.data().type,
            date: snap.data().date
          });
          return false;
        });
      });
  }

  removeEventHandler() {
    this.eventService.removeEvent();
  }
}

我的 HTML 显示他们 select 编辑的用户事件列表以及我可以在哪里看到 firestore id :

<ion-content>
  <ion-card *ngFor="let event of myEventsList; index as i">
    <ion-card-header>
      <ion-card-title>{{ event.id }}</ion-card-title>
      <ion-card-title>{{ event.name }}</ion-card-title>
      <ion-card-subtitle>$ {{ event.price }}</ion-card-subtitle>
      <ion-card-subtitle>City: {{ event.location }}</ion-card-subtitle>
      <ion-card-subtitle> Type of event : {{ event.type }}</ion-card-subtitle>
      <ion-icon
        name="close-circle"
        color="danger"
        (click)="removeEventHandler()"
      ></ion-icon>
    </ion-card-header>
  </ion-card>
</ion-content>

Answer 1

原来我完全忘记了我正在阅读的教程中提到的如何获取ID，因为我在阅读它时不需要删除方法，所以我跳过了它。

在我的 event-service.ts 中，我添加了以下内容以从我的文档参考中获取 ID：

  getEventDetail(eventId: string): firebase.firestore.DocumentReference {
    return this.eventListRef.doc(eventId);
  }

并在同一服务中添加了以下方法：

  removeEvent(eventId) {
    this.eventListRef
      .doc(eventId)
      .delete()
      .then(function() {
        console.log("Document successfully deleted!");
      })
      .catch(function(error) {
        console.error("Error removing document: ", error);
      });
  }

最后在 my-events-page.ts 中更新了我的处理程序：

  removeEventHandler(event) {
    this.eventService.removeEvent(event.id);
  }

这是我的HTML

中的点击事件

(click)="removeEventHandler(event)"

从 Firebase 中的用户特定集合中删除文档

Deleting a document from a user specific collection in Firebase

firebase

ionic-framework

angular

ionic4

google-cloud-firestore