如何使用 ngFor 和 ngIf 选择 Angular 中的所有复选框？

Question

我想选中 Angular 中的所有复选框，在激活“Seleccionar todo (Select all)”时我有 ngFor 和 ngIf，并且所有月份的复选框都被激活。月份存储在一个数组中。

HTML representation

<div class="form-group row">
     <label class="col-2 col-form-label">Meses de siembra</label>
         <div class="col-8">
             <table>
                 <tr>
                     <label>
                         <input type="checkbox" ng-model name="seleccionarTodo"> Seleccionar todo
                     </label>
                 </tr>
                 <tr>
                     <td>
                         <div *ngFor="let m of mesesSiembra; let i=index">
                             <label *ngIf="i<6">
                             <input type="checkbox" ng-model name="mes1a6"> {{m.nombre}}
                             </label>
                         </div>
                     </td>
                     <td>
                         <div *ngFor="let m of mesesSiembra; let i=index">
                             <label *ngIf="i>5">
                                 <input type="checkbox" ng-model name="mes7a12"> {{m.nombre}}
                             </label>
                         </div>
                     </td>
                 </tr>
             </table>
         </div>
</div>

Answer 1

mesesSiembra 中的每个 m 都需要有一个布尔属性来表示复选框的选中状态，并将其与 [checked]="m.checked" 和 (click)="m.checked = !m.checked" 绑定。您还需要为每个表单元素指定一个唯一名称，因此请使用索引使名称唯一 [name]="'mes_' + i"。

要检查它们，你有一个函数

this.mesesSiembra = this.mesesSiembra.map(m => ({ ...m, checked: true }));

这是一个演示https://stackblitz.com/edit/angular-ivy-ibqzjj?file=src%2Fapp%2Fapp.component.html