导航到Angular 9中的另一个页面后如何删除方法“添加”答案

【问题标题】：How to remove method "Add" after navigate to another page in Angular 9导航到Angular 9中的另一个页面后如何删除方法“添加”
【发布时间】：2020-06-14 15:42:21
【问题描述】：

我有一个包含产品列表的页面，将它们添加到订单中，然后转到订单列表并尝试删除整个订单，再次添加所有文档，刷新页面后不会发生。就像列表页面中的方法仍在内存中一样。我尝试 OnDestroy 但没有任何改变。导航到另一个页面后如何删除方法“添加”。产品列表中的“添加”方法。

  addToCard(p) {
    this.auth.user$.subscribe(ud => {
      if (ud !== null) {
        const dfecha = new Date(Date.now());
        const dotime = dfecha.toLocaleTimeString();
        const orderef = this.dataRef(ud.uid);
        const dprice = p.price;
        const dquant = p.quant || 1;
        const pricetotal = dprice * dquant;
        this.osrv.getOrderOpenOut(ud.uid, this.biident).subscribe(KX => {
          if (KX.length === 0) {            
            orderef.add({
              data...
            }).then((ref) => {
              this.orderid = ref.id;
              orderef.doc(ref.id).collection('products').doc(p.id).set({
                prodcode: p.code,
                prodid: p.id,
                prodnam: p.name,
                prodquant: this.OrderQuant || 1,
                prodmax: p.maxpedido,
                prodprice: p.price,
                totalprice: pricetotal,
              });
            });
          } else {
            this.osrv.getOrderOpenOut(ud.uid, this.biident).subscribe(xId => {
              const nOrdId = xId[0];
              orderef.doc(nOrdId).collection('products').doc(p.id).set({
                  prodcode: p.code,
                  prodid: p.id,
                  prodnam: p.name,
                  prodquant: this.OrderQuant || 1,
                  prodmax: p.maxpedido,
                  prodprice: p.price,
                  totalprice: pricetotal,
                });
            });
          }
        });
        this.snack.open('El producto se ha añadido al pedido', 'OK', {duration: 2000});
      } else {
        const dialogRef = this.dialog.open(LoginDialogComponent, {
          width: '320px',
        });
      }
      });
  }

订单列表中的方法Detele：

  deleteOrder(e) {
    const order = this.db.collection('users').doc(this.userid).collection('ordersout').doc(e.id);
    const quantprodu = order.collection('products');
    quantprodu.get().forEach(ilp => {
      if (ilp.size === 0) {
        order.delete();
      } else {
        quantprodu.get().forEach(indprod => {
          indprod.forEach(prd => {
            quantprodu.doc(prd.id).delete();
          });
        }).then(() => {
          order.delete();
        }).then(() => {
          this.snap.open('El pedido se ha eliminado de la lista', 'OK', {duration: 2000});
          this.backToHome();
        });
      }
    });
  }

我展示的一些组件使用 ng-template 和一些使用路由。删除最后一个订单我收到此错误。

ERROR FirebaseError: Function CollectionReference.doc() requires its first argument to be of type non-empty string, but it was: undefined
    at new n (http://localhost:4200/vendor.js:165025:23)
    at dr (http://localhost:4200/vendor.js:173857:15)
    at hr (http://localhost:4200/vendor.js:173802:5)
    at n.doc (http://localhost:4200/vendor.js:179537:50)
    at AngularFirestoreCollection.doc (http://localhost:4200/vendor.js:86736:54)
    at SafeSubscriber._next (http://localhost:4200/main.js:1922:37)
    at SafeSubscriber.__tryOrUnsub (http://localhost:4200/vendor.js:273576:16)
    at SafeSubscriber.next (http://localhost:4200/vendor.js:273515:22)
    at Subscriber._next (http://localhost:4200/vendor.js:273465:26)
    at Subscriber.next (http://localhost:4200/vendor.js:273442:18)

但是订单中的产品又被添加了

【问题讨论】：

在这里贴一些你做的代码，会很容易理解
如何为您的 Firestore 实例设置缓存数据？这可能是导致问题的原因。检查此documentation 以获取更多信息。让我知道这是否有帮助。
谢谢relamos，我必须更深入地研究这个话题，同时我已经将“routerLink”更改为“href”，因此我已经可以删除订单，并且不会发生添加周期再次。
很好，很高兴知道问题已修复。您应该将解决方案添加到问题的答案中，以便社区中的其他人遇到相同问题时可以找到您的解决方案。

标签： angular typescript firebase google-cloud-firestore

【解决方案1】：

可能是您的 Firestore 实例的缓存数据设置未正确设置，这可能会导致您遇到问题，您可以在此 documentation 上查看有关如何正确设置它的更多详细信息。

话虽如此，作为一种解决方法，您可以在前端替换纯 html href 中的 router-link 角度组件。

【讨论】：