通过空格键选中和取消选中 angular 2 中的复选框

Question

我是 angular 2 的新手，正在尝试实现一个复选框功能，即一旦我按下空格键，复选框就会被选中和取消选中。

component.html-

中复选框的代码

<md-checkbox #checkBox (keyup)="handleCheckBoxKeyUp($event,checkBox)" name="" value=""></md-checkbox>

在我的 component.ts-

中通过空格键选择复选框的代码

handleKeyUp($event,checkBox: MdCheckBox){
    if ($event.code===32){
    checkBox.checked=true;
    }
}

当我按下空格键时，复选框被选中，但在下一次按下空格键时它不会被取消选中。那应该发生 consecutively.Any 帮助将不胜感激。

此外，我想在多个页面中重复使用此功能。让我知道那是怎么回事 done.Thanks.

Answer 1

这是一道非常基础的编程题。

您不想将 checked 属性 设置为 true，而是想在每次按下空格键时反转它的值。

这是使用 ! 或逻辑运算符 NOT 完成的。在你的情况下它将是：

checkBox.checked = !checkBox.checked;

如果选中复选框（或 true），! 会将其反转并将 checked 设置为 false。