如何获取 Angular (10+) 中的所有复选框值？

Question

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

 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]"> ，我可以获得复选框值，但我也需要选项名称。

谢谢 ！！

Answer 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 转换为具有不同结构的数组，您可以使用 map 方法：

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