从 angular 2 typescript 中的复选框中获取值答案

【问题标题】：Getting value from checked box in angular 2 typescript从 angular 2 typescript 中的复选框中获取值
【发布时间】：2018-04-10 22:11:38
【问题描述】：

我正在使用 Angular 2 打字稿。我面临一个问题，我需要提交一个包含复选框的表单。我需要复选框属性中的值。复选框是动态的，因此可以有任意数量的复选框。

 <div class="checkbox" *ngFor="#label of labelList">
      <div class="col-sm-4">
           <label><input type="checkbox" value="{{label.Id}}">{{ label.Name }}</label>
      </div>   
 </div>

【问题讨论】：

标签： typescript angular

【解决方案1】：

我认为这应该可行（未经测试）

<div class="checkbox" *ngFor="let label of labelList">
  <div class="col-sm-4">
    <label>
      <input type="checkbox" value="{{label.Id}}" (change)="checkboxes[$event.target.getAttribute('value')]=$event.target.checked">
        {{ label.Name }}</label>
  </div>   
</div>

并将更改后的复选框的值存储在组件中的checkboxes 中。

【讨论】：

以及打字稿（angular2）方面的内容。功能是什么？
没有功能，只是一个对象checkboxes，其中包含已更改复选框的值。如果您提供有关您实际尝试完成的工作的更多信息，我可能会提出更多建议。
控制复选框的值？
抱歉，不明白您的评论？ console.debug(this.checkboxes)?
你先提供更多关于你的要求的信息怎么样？

【解决方案2】：

我将它用于复选框： ng2-material checkbox

你可以在你的组件中这样做：

<md-checkbox [checked]="exists(label.Id)" (click)="toggle(label.Id)"></md-checkbox>

  selected = [];
  @Output() selectedChange:EventEmitter<any> = new EventEmitter();

  toggle(id) {
    var index = this.selected.indexOf(id);
    if (index === -1) this.selected.push(id);
    else this.selected.splice(index, 1);
    this.selectedChange.emit(this.selected);
  }

  exists(id) {
    return this.selected.indexOf(id) > -1;
  }

【讨论】：

【解决方案3】：

输入

<input type="checkbox" (change)="selectionChange($event.srcElement, dataItem)">

更改事件

selectionChange(input: HTMLInputElement) {
    input.checked === true
      ? doSomethingIfTrue()
      : doSomethingIfFalse();
}

【讨论】：

【解决方案4】：

您必须为复选框指定name 属性才能在后端对其进行跟踪。

【讨论】：

【解决方案5】：

enter code here

submitForm(form:NgForm){
console.log(form.value);
}

<div class="checkbox" *ngFor="#label of labelList">
       <div class="col-sm-4">
            <label><input type="checkbox" name='label{{label.Id}}'  value="{{label.Id}}">{{ label.Name }} </label>
       </div>   
 </div>

使用名称属性，包括label.id，所以你会得到数组形式的所有值。

猜猜这会有所帮助。

【讨论】：

【解决方案6】：

我想你想知道复选框是否选中，你可以通过为输入标签属性指定 ng-model 属性以布尔值的形式轻松获得。

<md-checkbox ng-model="ctrl.someBooleanValue"></md-checkbox>

【讨论】：

该问题要求 Angular 2 的帮助； “ng-model”是 Angular 1 语法。