From 862162aba1cf39d43175965158c825bd7f290b0a Mon Sep 17 00:00:00 2001 From: Hien Pham Date: Fri, 13 Mar 2026 16:18:02 +0200 Subject: [PATCH] feat(Answer: 50): fix bug in effect --- .../50-bug-in-effect/src/app/app.component.ts | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/apps/signal/50-bug-in-effect/src/app/app.component.ts b/apps/signal/50-bug-in-effect/src/app/app.component.ts index ec6ba09b0..a98dbd7b8 100644 --- a/apps/signal/50-bug-in-effect/src/app/app.component.ts +++ b/apps/signal/50-bug-in-effect/src/app/app.component.ts @@ -40,11 +40,20 @@ export class AppComponent { gpu = model(false); constructor() { - /* - Explain for your junior team mate why this bug occurs ... + /* + if we use `if (this.drive() || this.ram() || this.gpu())`, + when the drive is selected, this `this.drive()` will be evaluated to true, + and the short circuit will happen. So the rest this.ram() || this.gpu() in the `if` statement + is not evaluated. And Angular will understand that this effect only depends on the `drive` signal. + That's why when we select the second checkbox again, there's nothing happens. + The rule of thumbs is always express the signal dependency explicitly. */ effect(() => { - if (this.drive() || this.ram() || this.gpu()) { + const drive = this.drive(); + const ram = this.ram(); + const gpu = this.gpu(); + + if (drive || ram || gpu) { alert('Price increased!'); } });