Question

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

我能够显示事件，然后单击以将事件添加到用户特定的“我的事件”列表中。我在这里遵循了该教程：https://javebratt.com/ionic-firebase-tutorial-object/

我无法从Firestore的用户列表中删除事件。当用户在HTML的* ngFor模板中使用“ event.id”选择要添加到“我的事件”的事件时，我就能看到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);
      });
  }

这是我的全方位服务。

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，其中用户特定的事件是在他们从初始“事件”列表中选择一个事件后显示的：

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显示了用户选择的事件列表以及可以在其中看到Firestore ID的HTML：

<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时不需要获取Delete方法，因此我获得了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中的用户特定集合中删除文档

1 个答案: