如何获取Angular 4中多个复选框的动态生成标签的值？答案

【问题标题】：How to get values of dynamically generated labels of multiple checkboxes in Angular 4?如何获取Angular 4中多个复选框的动态生成标签的值？
【发布时间】：2019-02-06 08:14:16
【问题描述】：

如果选中复选框，我需要获取复选框的标签值。

如何在选中时传递标签值？

<div *ngFor="let list1 of list['data']">
  <div class="form-group col-sm-12">
    <div class="row">
      <div *ngFor="let CheckBoxOptions of list1['sample']">
        <label 
          [for]="CheckBoxOptions?.value" 
          class="col-sm-4">
          {{CheckBoxOptions?.value}}
        </label>
        <input 
          class="col-sm-8 form-control" 
          [type]="checkbox" 
          [(ngModel)]="CheckBoxOptions.Checked" 
          [checked]="CheckBoxOptions.Checked" 
          (change)="CheckBoxOptions.Checked = !CheckBoxOptions.Checked" 
          value="{{CheckBoxOptions.value}}">
      </div>
    </div>
  </div>
</div>

【问题讨论】：

请在您创建复选框的地方添加相关代码
代码有利于我们调试错误/建议
添加请检查

标签： html angular forms checkbox angular4-forms

【解决方案1】：

好吧，您可以将CheckBoxOptions 传递给(change) 事件。然后你可以根据[(ngModel)]的值在TypeScript类中处理。

<div *ngFor="let list1 of list['data']">
  <div class="form-group col-sm-12">
    <div class="row">
      <div *ngFor="let CheckBoxOptions of list1['sample']">
        <label 
          [for]="CheckBoxOptions?.value" 
          class="col-sm-4">
          {{CheckBoxOptions?.value}}
        </label>
        <input 
          class="col-sm-8 form-control" 
          type="checkbox" 
          [(ngModel)]="CheckBoxOptions.Checked" 
          [checked]="CheckBoxOptions.Checked" 
          (change)="changed(CheckBoxOptions)" 
          [value]="CheckBoxOptions.value">
      </div>
    </div>
  </div>
</div>

现在在你的 TypeScript 类中，

changed(CheckBoxOptions) {
  console.log(CheckBoxOptions);
}

如果你的CheckBoxOptions.checked 是true 那里，你可以使用CheckBoxOptions 的value

另外，我删除了一些属性绑定语法。

这里有一个 StackBlitz 可以帮助您。只需查看 Upper List 并检查控制台中 item 的值。

【讨论】：

工作。但未选择的值未定义。
这里没有选择的值到底是什么意思？
可能是绑定到您尚未单击的复选框的值。
但是为什么changed 会在他们一开始没有改变的时候被调用呢？我还修复了一些并非真正需要的属性绑定语法。
是的，我认为这也不是问题。同样出于所有实际目的， undefined 是一个虚假值。