Angular 18中computed报this.doorAmount不是函数错误排查

错误原因 #

在创建computed信号时，直接传递类的私有方法作为回调（比如computed(this.calculatePricePerDoor)），导致方法内部的this丢失了对CalculationService实例的指向。当Angular执行computed的计算逻辑时，this不再指向当前服务实例，此时this.doorAmount无法被正确识别为computed信号的调用函数，从而抛出错误。

解决方案 #

将computed的回调改为箭头函数包裹方法调用，确保this始终指向服务实例。修改所有computed信号的定义：

// 替换原来的computed定义
doorAmount = computed(() => this.countDoorAmount());
price = computed(() => this.#price());
pricePerDoor = computed(() => this.calculatePricePerDoor());
priceStep = computed(() => this.calculatePriceStep());
hours = computed(() => this.countHours());
days = computed(() => this.countDays());

注意：原代码中price = computed(this.#price);的写法错误，#price是signal对象，必须通过调用this.#price()获取其值，箭头函数包裹调用才能保证逻辑正确。

额外优化提示 #

原代码中calculatePrice方法需要手动调用才能更新价格，无法自动响应依赖信号的变化。可以将#price替换为computed信号，实现自动更新：

// 移除原有的#price信号和calculatePrice方法，替换为以下computed定义
price = computed(() => {
  return basePrice +
    this.pricePerDoor() +
    basePricePerDay * this.days() +
    this.priceStep();
});

// 同时删除构造函数中的this.calculatePrice();调用

这样当门的数量参数变化时，价格会自动重新计算，无需手动触发更新。

内容的提问来源于stack exchange，提问作者Benjamin