Удаление документа из пользовательской коллекции c в Firebase - PullRequest
Новая
       9

Удаление документа из пользовательской коллекции c в Firebase

0 голосов
/ 21 января 2020

Я новичок в Firebase и работаю над небольшим проектом, чтобы лучше познакомиться с Firebase / Firestore. Прямо сейчас я использую аутентификацию Firebase для регистрации и входа пользователей. После входа в систему отображается список событий для пользователя, которого я создал в MySQL и подключаюсь к своему приложению Angular / Ioni c через http-вызов Spring. (Это было указано для меня, чтобы сделать это таким образом, чтобы также изучить некоторые Java / Spring.)

Я могу отобразить события и щелкнуть, чтобы добавить событие к пользователю, указанному c «мои события» список. Я следовал этому уроку: https://javebratt.com/ionic-firebase-tutorial-object/

У меня проблемы с удалением события из списка пользователей в Firestore. Я могу видеть указанный c идентификатор события, который добавляется Firestore, когда пользователь выбирает событие для добавления в «мои события» с помощью «event.id» в моем шаблоне * ngFor в html.

Независимо от того, что я делаю, я не могу заставить функцию удаления работать должным образом. На самом деле он говорит, что работает успешно, но ничего не удаляется. Я полагаю, что я что-то упускаю между методами .do c () и .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);
      });
  }

Вот мой полный сервис.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, где пользователь указывает c события, отображаемые после того, как он выберет одно из исходного списка событий: 

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, который отображает список пользователей событий, которые они выбран и где я могу увидеть идентификатор пожарного магазина: 

<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>

1 Ответ

1 голос
/ 23 января 2020

Оказывается, я полностью забыл учебник, за которым я следовал, упоминалось, как получить идентификатор, поскольку мне не понадобился метод удаления при чтении, поэтому я пропустил его.

В моем событии - service.ts Я добавил следующее, чтобы получить идентификатор из ссылки на документ: 

  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)"
...