javascript - Rangeerror Angular 6 超出最大调用堆栈

Question

我正在做购物车应用程序，当用户从 list 中取消选择项目时，我需要从总金额中减去，并且每次用户通过共享服务添加或删除时，我都使用行为主题来更新总金额。从总量中减去后，我再次相应地更新主题值。但在这里我收到错误堆栈超出。

onItemDeSelect(uncheckedItem) {
    this.eachItem.itemExtraOptionPrice.prices.forEach(item => {
      this.shared.updateAmountValue.subscribe(value => {
        if (item.id === uncheckedItem.id) {
          this.totalAmount = value - item.amount;
          this.shared.updatedAmount(this.totalAmount);
        }
      });
    });
}

updateAmountValue: BehaviorSubject<number> = new BehaviorSubject(0);

  updatedAmount(value) {
    this.updateAmountValue.next(value);
  }

此处的 onItemDeSelect() 函数每次取消选择项目时都会执行，然后更新共享服务中的总金额。我不知道我哪里做错了。

Answer 1

超过最大调用堆栈错误主要发生在函数进行无限递归时。这在代码接收器中不是很明显吗？您已经订阅了再次更新值的内容。在你的代码中你正在做

this.shared.updatedAmount(this.totalAmount);

这将更新值并触发行为主体的偶数

updateAmountValue: BehaviorSubject<number> = new BehaviorSubject(0);

并且您已订阅该主题，该主题将再次更新值等，从而导致无限递归状态。

可能的解决方案

您可以直接获取主题的值，而不需要订阅它。

onItemDeSelect(uncheckedItem) {
    this.eachItem.itemExtraOptionPrice.prices.forEach(item => {
      let value = this.updateAmountValue.getValue();
        if (item.id === uncheckedItem.id) {
          this.totalAmount = value - item.amount;
          this.shared.updatedAmount(this.totalAmount);
        }
    });
}

这不会导致任何递归条件。希望这会有所帮助。