检查Angular HTML中的布尔真值

Question

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

StackBlitz example of my code

我上面代码的输出状态：

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

新建：假

双 eq isCreateNew==false: true

字符串 isCreateNew=='false': false

obj isCreateNew===false: true

设置为 true 创建新的：true

双 eq isCreateNew==false: false

字符串 isCreateNew=='false': false

obj isCreateNew===false: false

设置为假

新建：假

double eq isCreateNew==false: false

字符串 isCreateNew=='false': true

obj isCreateNew===false: false

Answer 1

在 JS 中只有一个空字符串等于 `false'。所以，预期的结果是

字符串 isCreateNew=='false': false

总是。您可以在浏览器控制台中轻松查看。

然后，在绑定 mat-radio-button 值属性时不要使用方括号。在这种情况下，传递的值不会被评估为 JavaScript。因此，您的 mat-radio-button 元素的值是一个字符串。不是布尔值。使用方括号解决其他问题。

<mat-radio-group class="example-radio-group" [(ngModel)]="changeAE">
    <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>
</mat-radio-group>

Answer 2

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

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

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

现在您可能会问为什么当您将 isCreateNew 设置为 false 时它会返回 true。问题实际上出在您的代码中。您的单选按钮没有将值设置为布尔值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 单选按钮被选中。

Answer 3

像这样的value="true" 会将changeAE 设置为字符串的值'true' 但是这个[value]="true"将AE 更改为真正的布尔值

<mat-radio-group class="example-radio-group" [(ngModel)]="changeAE">
    <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>
</mat-radio-group>

=== 比较并检查比较边的类型typeof 'true' 是字符串，typeof true 是布尔值（如果有任何类型）