如何使用 AngularFireStore 实现删除操作

Question

我正在尝试在 angular 应用程序中实施 DELETE 操作。我希望能够单击一个按钮并删除一个 firestore 文档，但我的代码无法正常工作。所以我正在为我的所有 firestore 操作使用一个服务，并在我的组件中调用该服务

station.service.ts

import { Injectable } from "@angular/core";
import { AngularFirestore } from "@angular/fire/firestore";
import { Station } from "../../models/station.model";

@Injectable({
  providedIn: "root"
})
export class StationService {
  constructor(private afs: AngularFirestore) {}

  deleteStation(stationId: string) {
    this.afs.doc("stations/" + stationId).delete();
  }
}

station.component.ts

import { Component, OnInit } from "@angular/core";
import { StationService } from "../services/station.service";
import { Station } from "./../../models/station.model";

@Component({
  selector: "app-station",
  templateUrl: "./station.component.html",
  styleUrls: ["./station.component.css"]
})
export class StationComponent implements OnInit {
  stations: Station[];

  constructor(private stationService: StationService) {}

  ngOnInit() {
    this.stationService.getStations().subscribe(data => {
      this.stations = data.map(e => {
        return {
          id: e.payload.doc.data(),
          ...e.payload.doc.data()
        } as Station;
      });
    });
  }

  delete(id: string) {
    if (confirm("Confirm delete operation")) {
      //console.log(id);
      this.stationService.deleteStation(id);
    }
  }
}

我在 console.log 消息中找不到 ID，看起来像这样

address: "Somewhere along PTI road, Effurun. Delta State"
name: "Effurun"
region: "South-South"

我该如何修复我的代码？提醒，这是我第一次使用 firestore。

Answer 1

终于找到bug了。在 station.component.ts ngOnInit() 方法中，id 被设置为对象而不是 id。像这样将其设置为 id

ngOnInit() {
  this.stationService.getStations().subscribe(data => {
    this.stations = data.map(e => {
      return {
        id: e.payload.doc.id,
        ...e.payload.doc.data()
      } as Station;
    });
  });
}

现在，字符串类型的实际 ID 将与每个对象一起返回，然后可以将其传递给 delete(id: string) 方法。

如何使用 AngularFireStore 实现删除操作

How do I implement delete operation using AngularFireStore

javascript

angularfire2

angular

google-cloud-firestore