I have a select that should show options based on the status of a game.
Code:
<select class="form-select" aria-label="Status" [(ngModel)]="selectedGame().status">
@if (selectedGame().status === GameStatus.played || selectedGame().status === GameStatus.forfeit) {
<option [value]="GameStatus.played">{{ GameStatus.played | gameStatus }}</option>
<option [value]="GameStatus.forfeit">{{ GameStatus.forfeit | gameStatus }}</option>
} @else {
<option [value]="GameStatus.notPlayed">{{ GameStatus.notPlayed | gameStatus }}</option>
<option [value]="GameStatus.postponed">{{ GameStatus.postponed | gameStatus }}</option>
}
</select>
Initially the options are rendered correctly based on the status. However after I swap between one of the available options it will then always show the options from the else block.
I tried to debug but can’t find the problem. When switching from ‘Played’ to ‘Forfeit’ the status is actually set correctly from ‘1’ to ‘3’. Maybe somewhere in the process the value is emptied and the signal is somehow not sending a notification when the new value is set?
jasper heeren is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
When your signal contains an object, and a property of an object changes, the signal is not evaluated again, because referential equality (=== comparison) is used by default. So what you are seeing is expected behavior. I don’t see a reason why selectedGame() needs to be a signal in the first place. In this case, an easy fix would be to get rid of this signal and create a selectedGameStatus signal instead which only holds the status and use it like the following without parentheses:
<select [(ngModel)]="selectedGameStatus">
You can also try to mess with the equality function of the signal, but I advice against it in your case.