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

Question

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

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>

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

[｛'选项1'，true｝，｛'选择2'｝，false｝，｝'选择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数组将被绑定，并且当它更改时，检查的值将被更新

如果你想把它映射到一个不同结构的数组，你可以使用映射方法：

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