javascript - 检查 Angular HTML 中的 bool 真值

Question

我正在尝试检查 Angular HTML 中的 bool 值真实性，但得到了一个奇怪的结果。看完this SO post我以为我明白发生了什么。我希望能够使用 === 运算符，但正如我下面的最后一个示例所示，它没有返回正确的结果。

StackBlitz example of my code

我上面代码的输出状态:

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

create new: false

double eq isCreateNew==false: true

string isCreateNew=='false': false <----- unexpected

obj isCreateNew===false: true

设置为 true 创建新的:true

double eq isCreateNew==false: false

string isCreateNew=='false': false

obj isCreateNew===false: false

设为假

create new: false

double eq isCreateNew==false: false <----- unexpected

string isCreateNew=='false': true

obj isCreateNew===false: false <----- unexpected

Answer 1

根据 type conversion rules ，字符串 'false' 不会转换为 bool 值 false。这意味着

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

所以这应该不是意料之外的，这是意料之中的结果。

现在您可能会问为什么当您将 isCreateNew 设置为 false 时它会返回 true。问题实际上出在您的代码中。您的单选按钮没有将值设置为 bool 值 false 或 true 而是将其设置为字符串。要将其设置为 bool 值，您需要使用方括号。

<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 单选按钮。