从 Angular 2 打字稿中的 HTML 获取复选框值。

Posted 2023-03-05

【中文标题】从 Angular 2 打字稿中的 HTML 获取复选框值。

【英文标题】：Get checkbox value from HTML in Angular 2 typescript.

【发布时间】：2017-04-13 18:31:38

【问题描述】：

我的 html 中有两个复选框，如下所示：

<label><input type="checkbox" id="checkbox1" /> Folder 1: </label>
<label><input type="checkbox" id="checkbox2" /> Folder 2: </label>

但我不确定如何在我的 Typescript 文件中检索复选框值。我知道我可以通过为每个复选框调用一个单独的函数并更改我的打字稿中的一个值来实现这一点。但是，这似乎不是最好的方法——如果我有十个不同的复选框，那么我的打字稿中将需要 10 个不同的函数。

有没有一种简单的方法可以根据 id 获取复选框是打开还是关闭？还有比这更好的方法吗？

【问题讨论】：

你能发布你的组件的类代码吗？我认为您应该在输入上使用角度数据绑定。

【参考方案1】：

如果要双向绑定复选框，则应使用 ngModel 绑定。

 <input type="checkbox" [(ngModel)]="checkBoxValue" />

在你的组件类中：

export class AppComponent  
  checkboxValue: boolean = false;

【讨论】：

添加了这个并得到以下错误：'无法绑定到'ngModel'，因为它不是'input'的已知属性。我在课堂上导入了 FormsModule。

你应该在你的 NgModule 导入中导入 FormsModule，而不仅仅是在你的类中。 angular.io/docs/ts/latest/tutorial/…

不设置“name”属性是不行的。不知道在哪里可以找到我正在使用的 Angular 版本，可能是 Angular 5（新的 .Net 项目在 2 个月前开始）。

【参考方案2】：

你可以绑定到input元素的checked属性，如下所示，

@Component(
  selector: 'my-app',
  template: `<h1>Hello name</h1>
  <label><input type="checkbox" [checked]="checkbox1" /> Folder 1: </label>
<label><input type="checkbox" [checked]="checkbox2" /> Folder 2: </label>
  `
)
export class AppComponent  
  name = 'Angular'; 
  checkbox1 = false;
  checkbox2 = true;

这里是Plunker。

希望这会有所帮助！

【讨论】：

Plunker 不再工作。收到错误：(SystemJS) XHR 错误 (404) loading unpkg.com/rxjs/operators.js

【参考方案3】：

您可以在复选框中使用[value]="myVariable"！