我无法使用 firestore 删除 angular 中的实时记录

Question

我在angular里面有这段代码，我想删除一条记录并实时创建它，当我创建一个产品时它创建它很好，但是当我删除它时它不起作用，它只有在我更新浏览器时才有效。我不知道代码可能在哪里失败。

我认为它可能在 getProducts (): Promise 中，因为当我单击“删除”时它会创建一个产品，而当我更新浏览器时它会删除它。

非常感谢您的帮助。谢谢。

我的data.service.ts

import { Injectable } from '@angular/core';
import { Producto } from '../interfaces/producto';
import { AngularFirestore } from '@angular/fire/firestore';
import { NgxSpinnerService } from "ngx-spinner";
import Swal from 'sweetalert2';


@Injectable({
  providedIn: 'root'
})
export class DataService {

  private colProduct: string = 'Products';
  private products: Producto[] = [];

  constructor(private _firestore: AngularFirestore, private _spinner: NgxSpinnerService) {

  }


  showSpinner(): void {
    this._spinner.show();
  }
  hideSpinner(): void {
    this._spinner.hide();
  }
  showAlert(icon: any, title: string, text: string, showConfirmButton: boolean, position: any, timer: number) {
    Swal.fire({
      icon: icon,
      title: title,
      text: text,
      showConfirmButton: showConfirmButton,
      position: position,
      timer: timer

    })
  }

  updateProduct(data: any, id: string) {

  }

  deleteProduct(id: string): Promise<any> {
    return this._firestore.collection(this.colProduct).doc(id).delete();
  }

  createProduct(producto: Producto): Promise<any> {
    return this._firestore.collection(this.colProduct).add(producto);
  }

  getProducts(): Promise<any> {
    return new Promise(resolve => {
      this._firestore.collection(this.colProduct).stateChanges().subscribe(collection => {
        collection.forEach((document) => {
          const data:any  = document.payload.doc.data();
          data.id = document.payload.doc.id;
          this.products.push(data);

        });


      resolve(this.products);


      });

    });
  }
}

我的components.ts

    import { Component, OnInit } from '@angular/core';
import { Producto } from '../shared/interfaces/producto';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { DataService } from '../shared/services/data.service';

@Component({
  selector: 'app-catalogo',
  templateUrl: './catalogo.component.html',
  styleUrls: ['./catalogo.component.scss']
})
export class CatalogoComponent implements OnInit {

  public form: FormGroup;

  public productos: Producto[] = [];

  constructor(private _data: DataService) { }

  ngOnInit(): void {
    this._data.getProducts().then((data: Producto[]) => {
      this.productos = data;
    });
    this.form = new FormGroup({
      title: new FormControl('', Validators.required),
      pricing: new FormControl('', Validators.required),
      description: new FormControl('', Validators.required)
    });

  }

  public saveForm(): void {
    this._data.showSpinner();
    if (this.form.valid) {
      const { title, description , pricing } = this.form.value;
      const newProduct: Producto = {
        title: title,
        description: description,
        pricing: pricing,
        image: "https://celadasa.vteximg.com.br/arquivos/ids/156984-1000-1000/BQ7032-001.jpg",
        category: 'calzado',
        creationDate: new Date()

      }

      this._data.createProduct(newProduct).then(() => {
        this.form.reset();
        this._data.hideSpinner();
        this._data.showAlert('success', 'product', 'ok', false, 'center', 3500);

      });

    } else {
      this._data.hideSpinner();
      this._data.showAlert('error', 'form invalid', 'validad', false, 'center', 3500);
    }


  }


  delete(id) {
    this._data.showSpinner();
    this._data.deleteProduct(id).then(() => {
      this.form.reset();
      this._data.hideSpinner();
      this._data.showAlert('success', 'product delete', 'delete', false, 'center', 3500);

    });
  }
}

我不知道代码是在 getProductos 中还是在其他地方，或者我是否必须使用管道和映射。

Answer 1

重构您的产品列表功能：

getProducts(): Observable<Producto[]> {
    this._firestore.collection<Producto>(this.colProduct).valueChanges();
}


this._data.getProducts().subscribe((data: Producto[]) => {
  this.productos = data;
});

更新

在组件内进行 Observable 订阅 template.html

我的components.ts

  public productos: Producto[] = [];

  this._data.getProducts().subscribe((data: Producto[]) => {
      this.productos = data;
    });
>>
  public productos$: Observable<Producto[]>;

  this.productos$ = this._data.getProducts();

我的components.html

  productos
>> 
  <div *ngFor="let product of productos$ | async"
   /** List each product item*/
  <div>

我无法使用 firestore 删除 angular 中的实时记录

I can't delete realtime record in angular with firestore

firebase

typescript

angularfire2

angular

google-cloud-firestore