Question

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

如何在检查中传递标签值？

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

Answer 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，则可以使用value中的CheckBoxOptions

此外，我已经删除了一些属性绑定语法。

以下是 StackBlitz 可以帮助您的问题。只需查看上方列表，然后在控制台中查看item的值即可。

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

1 个答案: