如何獲取 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} })