*ngIf 中的角度异步管道 - 处理 0 值

Question

我有以下 html 片段：

<div *ngIf="calculatedValue$ | async as calculatedValue">
  {{calculatedValue}}
</div>

但是如果calculatedValue$的发射值为0（type = number），则div将不会显示在DOM中。

正确的展示方式是什么？ 也许是通过将非空检查添加到 *ngIf 的方式。

Answer 1

如何在注释中提及@joosep部分，您可以将值分配给对象，例如此代码即使其值为0也显示进度条

组件.ts

progress$ = new BehaviorSubject<number>(0);

组件.html

<ng-container *ngIf="{ value: progress$ | async } as progress">
    <app-progressBar
       [value]="progress.value"
    ></app-progressBar>
</ng-container>

Answer 2

不用*ngIf，只需使用*ngLet。网络上有多种实现，例如在 https://github.com/ngrx/component-builds 中。 老实说，我不明白为什么这仍然不是 Angular Core 的一部分。

Answer 3

正如您已经建议的那样；它的类型必须是数字。

typeof (calculatedValue$ | async) === 'number'

或者根本不为空

(calculatedValue$ | async) !== null

Answer 4

(calculatedValue$ | async) != null (and not !==)
(calculatedValue$ | async) == null (and not ===)

根据我审查大量开发人员代码的经验，最好习惯于始终通过明确声明来检查 null，即使在 javascript 中“它有效”且不必要”。这将消除许多未来的错误，例如 0 错误。我已经看到很多由此产生的错误。

您还希望习惯使用“== null”或“!= null”来涵盖“null”和“undefined”，除非您明确地遇到了它们不同的罕见情况。 对于 javascript/typescript 中的所有代码都是如此。

Answer 5

这是预期的行为。以下是 javascript 目前转换为 false 的所有值：

if (false)
if (null)
if (undefined)
if (0)
if (NaN)
if ('')
if ("")
if (``)

解决此问题的最简单方法是将可观察对象发出的值转换为对象的属性。您可以在组件类文件中或直接在 HTML 中执行此操作。我将直接在 HTML 中执行此操作。看起来像这样：

<ng-container *ngIf="{ observableValue: promise | async } as calculatedValue">
    <div *ngIf="calculatedValue.observableValue !== null">{{ calculatedValue.observableValue }} I am now showing</div>
</ng-container>

我们在这里所做的是使用异步管道订阅 observable，并将值放入对象的 observableValue 属性中。请注意 *ngIf 结构指令内的大括号。然后我们使用 as 语法，它重命名变量以在模板中使用。在双大括号内，通过访问数据对象的 observableValue 属性来输出结果。 ng-container 元素上的 *ngIf 指令现在将始终评估为 true，因为我们已经创建了该对象。因此，无论可观察对象发出什么值，我们都会将其输出到屏幕上。

示例：https://stackblitz.com/edit/async-pipe-jghgvc?file=app%2Fasync-pipe%2Fasync-pipe.component.html