如何获取Angular（10+）中的所有复选框值？答案

【问题标题】：How to get all checkboxes values in Angular (10+)?如何获取Angular（10+）中的所有复选框值？
【发布时间】：2021-05-05 15:42:10
【问题描述】：

我从数据库中检索应该为所有公司显示哪些选项（仅用于显示目的），这是我的模型：

 export class OpcionesModel {
        name: string;
        isActive: boolean;
        id?: string;
        
 }

然后，我显示所有可用的选项（活动）：

<div class="row" *ngFor="let option of optionsArray; let i=index">
        <div class="col-4">
            <h5>{{option.name | titlecase}}</h5>
          
        </div>
        <div class="col">
            <input type="checkbox">

        </div>
        
    </div>

我想要做的是获取所有选项的名称以及是否选中其复选框并将其存储在数组中，例如：

[{'option 1', true}, {'option 2'}, false}, {'option 3', false}...].

编辑：我创建了一个数组：checkes: boolean[] =[];

如果我这样做<input type="checkbox" [(ngModel)]="checkes[i]">，我可以获得复选框值，但我也需要选项名称。

谢谢！！

【问题讨论】：

标签： javascript angular typescript

【解决方案1】：

<label>
    <input type="checkbox" name="isActive"  [(ngModel)]="option.isActive">
    {{ option.name }}
</label>

取自这里：https://scotch.io/tutorials/how-to-deal-with-different-form-controls-in-angular-2

在您的 ts 文件中，您的 optionsArray 数组将被绑定，并且检查的值将在更改时更新

如果要将其映射到具有不同结构的数组，可以使用 map 方法：

this.optionsArray.map(oa=> {return { myOptionName:oa.name, active:oa.isActive} })

【讨论】：

第一个模型只是显示我应该在页面中显示哪些“选项”，不要考虑到这一点。我需要在同一个对象中获取选项名称和复选框值（t 或 f），然后将其推送到数组中。对不起，模型解释，我的错。
当您绑定option.isActive 时，您的数组会保留您需要的所有值。如果您想要一个具有不同结构的数组，请映射它。我已经更新了我的答案。