通过空格键选中和取消选中 Angular 2 中的复选框答案

【问题标题】：check and uncheck checkbox in angular 2 via spacebar通过空格键选中和取消选中 Angular 2 中的复选框
【发布时间】：2016-10-15 17:07:07
【问题描述】：

我是 Angular 2 的新手，并试图实现一个复选框功能，即，一旦我按下空格键，复选框应该被选中和取消选中。

component.html 中的复选框代码-

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

在我的组件中通过空格键选择复选框的代码.ts-

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

当我按下空格键时，复选框被选中，但在下次按下空格键时不会取消选中。这应该连续发生。任何帮助将不胜感激。

另外，我想在多个页面中重复使用此功能。让我知道如何做到这一点。谢谢。

【问题讨论】：

【解决方案1】：

这是一个非常基本的编程问题。

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

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

checkBox.checked = !checkBox.checked;

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

【讨论】：