Angular2,单击按钮选中或取消选中复选框

标签 angular

我有一个 angular2 应用程序,我想在其中根据用户操作动态地选中或取消选中。

这是我的功能,

  • 我有一个复选框,点击这个复选框我会要求用户输入
    他/她的电子邮件,然后按提交按钮。在用户按下
    提交按钮 我会显示一个弹出窗口,说明您的电子邮件已保存。和我 隐藏文本框和提交按钮。与此同时,我想 取消选中用户首先选中的复选框以输入 电子邮件。

当我尝试使用它时

document.getElementById("checkBoxID").checked = false;

编译出错

Error:(33, 60) TS2339: Property 'checked' does not exist on type 'HTMLElement'.

我在某处进行了研究,发现可以“选择”而不是“选中”此属性,但即使这样也行不通。

我可以使用带有 bool 值的 *ngIf 的解决方法,并在我的组件中写入两个复选框,一个带有“已选中”,一个带有“未选中”,并根据 bool 值相应地呈现它们并继续设置单击按钮时的 bool 值,但我认为这将是肮脏的解决方案。

Angular2 肯定会有更简单的方法来做到这一点,我在这里缺少 :(

最佳答案

两种可能的方式

  <button (click)="cb.click()">toggle</button>
  <input type="checkbox" #cb>
  <button (click)="isChecked = !isChecked">toggle</button>
  <input type="checkbox" [(ngModel)]="isChecked">

Plunker example

关于Angular2,单击按钮选中或取消选中复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37864669/

相关文章:

javascript - :active selector后触发点击事件

javascript - 如何有条件地启用 ng2-smart-table 的可编辑属性

node.js - 构建 :Cannot find type definition file for 'node'

angular - 在 Stackblitz 中导入 CSS 时出现 Mime 类型错误

javascript - Angular 4 : reactive form control is stuck in pending state with a custom async validator

angular - ng extract-i18n 配置忽略重复消息

javascript - 根据流中的值暂停 RxJS 流

unit-testing - Angular 2 单元测试 : How do I test for the context menu and double click events?

Angular Jasmine 测试无法触发使用 fromEvent rxjs 运算符创建的 Observable

angular - 如何创建自定义响应式表单元素?