如何从动态复选框中选择单个复选框答案

【问题标题】：How to select individual checkboxes from dynamic set of checkboxes如何从动态复选框中选择单个复选框
【发布时间】：2021-04-11 04:11:39
【问题描述】：

我正在尝试从动态生成的复选框列表中实现单个复选框的选择，并且当我在 h6 级别（selectAll() 方法）选中复选框时，应选中所有单个复选框。

我怎样才能做到这一点？请帮我。提前致谢。

this.services.getData().subscribe(result => {
  if(result.success) {
    this.setData = result.data.values;
  }
});

selectedData(pos, event) {
  
}

selectAll(event) {

}

<div class="data-info">
   <h6><input type="checkbox" (click)="selectAll($event)" class="header-checkbox">Info()</h6>
    <table>                    
      <tr *ngFor="let data of setData; let i = index">
        <td class="table-data">
          <p-checkbox binary="true" class="user-checkbox" (change)="selectedData(i, $event)" [(ngModel)]="selectedData"></p-checkbox>
          <span class="user-values">{{data.value}}</span>
        </td>
      </tr>
    </table>                    
  </div>

【问题讨论】：

标签： javascript angular angular7

【解决方案1】：

我建议您尝试 angular material 复选框。 https://material.angular.io/components/checkbox

那么，您可以使用变量通过其 API 的检查输出来检查/取消选中它们。

 <mat-checkbox (click)="$event.stopPropagation()"
                    (change)="$event ? toggle(item, $event) : null"
                   [checked]="item.isChecked" >
      {{item.value}}
    </mat-checkbox>

然后你可以使用 rxjs 中的 map 来更改/初始化每个项目的 isChecked 字段（一开始它们都应该是 false，也许只有一个 true - 如果你想要默认值）

selectAll(event) {

// foreach item => isChecked = true
}

selectedData(pos, event) {
  //find the item you want to check and isChecked = false, rest of the fields should have isChecked = true (if you want unique on checked)
}

【讨论】：

{{item.value}} 抱歉*