时间戳

首页 > 解决方案 > 检查Angular HTML中的布尔真值

javascript - 检查Angular HTML中的布尔真值

问题描述

我正在尝试检查 Angular HTML 中的布尔值真实性，并得到一个奇怪的结果。在阅读了这篇 SO 帖子后，我想我明白发生了什么。我希望能够使用 === 运算符，但正如我下面的最后一个示例所示，它不会返回正确的结果。

我的代码的 StackBlitz 示例

我上面的代码的输出状态：

未选择任何内容，但默认值为 false

新建：假

双 eq isCreateNew==false: true

字符串 isCreateNew=='false': false <----- 意外

obj isCreateNew===假：真

设置为 true 创建新：true

双 eq isCreateNew==false: 假

字符串 isCreateNew=='false': false

obj isCreateNew===假：假

设置为假

新建：假

双 eq isCreateNew==false: false <----- 意外

字符串 isCreateNew=='false': true

obj isCreateNew===false: false <----- 意外

标签： javascripthtmlangular

解决方案

根据类型转换规则，字符串'false'不会转换为布尔值false。这意味着

false == 'false' // It is indeed false

所以这不应该是意外的，这是预期的结果。

现在你可能会问为什么true当你设置isCreateNew为false. 问题实际上出在您的代码中。您的单选按钮没有将值设置为布尔值，false或者true将其设置为字符串。要将其设置为布尔值，您需要使用方括号。

<mat-radio-button class="example-radio-button" [value]="true">set true</mat-radio-button>
<mat-radio-button class="example-radio-button" [value]="false">set false</mat-radio-button>

另一种判断您的价值未正确设置的方法是由您的ngModel. 如果您在组件中设置isCreateNew为false，则应设置检查false单选按钮。由于您的值是字符串，因此不会发生这种情况。添加方括号后，您可以看到false单选按钮被选中。

推荐阅读