Angular中signal与computed使用number|null/undefined时0值失效求助

问题出在Angular的*ngIf隐式真值判断上：JavaScript里0属于"假值"，当你用*ngIf="selectedId() as id"时，表达式会先判断selectedId()是否为真——0会被判定为假，哪怕它不是null，导致模板不渲染。

以下是几种不依赖-1替代空值的解决方案：

1. 显式判断非null并绑定值（避免重复调用computed） #

用ng-container包装，一次性获取computed值并判断，避免多次调用：

<ng-container *ngIf="{ id: selectedId() } as data">
  <div *ngIf="data.id !== null">Current id: {{ data.id }}</div>
</ng-container>

2. 直接在*ngIf中显式判断 #

如果不介意少量重复调用（computed本身会缓存结果，性能无影响），可以直接写：

<div *ngIf="selectedId() !== null">Current id: {{ selectedId() }}</div>

3. 新增辅助computed判断状态 #

在组件里加一个专门判断是否有有效ID的computed，模板更简洁：

public someSignal = signal<number | null>(null);
public selectedId = computed(() => {
  let result: number | null = null;
  const value = this.someSignal();
  // 你的计算逻辑
  return result;
});
// 新增辅助computed
public hasValidId = computed(() => this.selectedId() !== null);

模板使用：

<div *ngIf="hasValidId()">Current id: {{ selectedId() }}</div>

4. 使用*ngIf的let语法（Angular 17+） #

如果用的是Angular 17及以上，可以结合let语法更优雅地处理：

<div *ngIf="selectedId() !== null; let id">Current id: {{ id }}</div>

这里let id会自动把selectedId()的值绑定到变量id上，无需重复调用。

核心逻辑就是：不要依赖*ngIf的隐式真值判断，显式区分null和有效数字（包括0）。

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