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

Question

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

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

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

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

原文由 Roka545 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果你想双向绑定复选框，你应该使用 ngModel 绑定。

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

在你的组件类中：

 export class AppComponent {
  checkboxValue: boolean = false;
}

原文由 andrea.spot. 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以绑定到 input 元素的选中属性，如下所示，

 @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 。

希望这可以帮助！！

原文由 Madhu Ranjan 发布，翻译遵循 CC BY-SA 3.0 许可协议