Angular中基于Signal的<select>条件选项切换异常问题及解决

问题场景 #

需要实现一个根据游戏状态动态显示对应选项的<select>控件，初始渲染时选项显示正常，但切换可用选项后，始终显示else块中的选项。调试确认切换时状态值从1（对应GameStatus.played）正确变为3（对应GameStatus.forfeit），但逻辑判断却进入了else分支。

初始代码 #

<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>

问题原因 #

使用[value]绑定枚举值时，Angular会将数字类型的GameStatus枚举转换为字符串类型。更新Signal后，selectedGame().status的类型从数字枚举变为字符串，导致全等判断selectedGame().status === GameStatus.played不成立，逻辑因此进入else块。

解决方案 #

将选项绑定从[value]替换为[ngValue]，[ngValue]支持绑定任意类型的值，能保留枚举的数字类型，确保类型匹配，让判断逻辑正常执行。

修正后的代码：

<select class="form-select" aria-label="Status" [(ngModel)]="selectedGame().status">
    @if (selectedGame().status === GameStatus.played || selectedGame().status === GameStatus.forfeit) {
        <option [ngValue]="GameStatus.played">{{ GameStatus.played | gameStatus }}</option>
        <option [ngValue]="GameStatus.forfeit">{{ GameStatus.forfeit | gameStatus }}</option>
    } @else {
        <option [ngValue]="GameStatus.notPlayed">{{ GameStatus.notPlayed | gameStatus }}</option>
        <option [ngValue]="GameStatus.postponed">{{ GameStatus.postponed | gameStatus }}</option>
    }
</select>

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