Mat复选框.. CheckAll和Uncheck All - Angular Material 6

Question

我有一个复选框树，如：

我想要实现的目标：

• 单击“全选”时，应检查其下的所有复选框，并更新FormArray值，反之亦然“Unselect All”
• 当我选择Master Checkbox1或Master Checkbox2时，应选择其子项并更新FormArray。

PS。：复选框是从服务动态生成的。

以下是表单结构：

fb.group({ departments: this.fb.array([]) })

要存储权限复选框值，我在下面的部门FormArray中

fb.group({
  department: ['', Validators.required],
  permissions: this.fb.array([])
});

我试着在HTML中切换变量以切换已检查状态，但我无法通过这样做更新formArray - 权限值。

表格标记如下：

<div formArrayName="departments">
      <div *ngFor="let ctrl of createUserForm['controls'].departments['controls']; let i = index" [formGroupName]="i" class="mb10">
        <mat-expansion-panel class="selected-department d-none" id="departmentBar-{{i}}">
          <mat-expansion-panel-header>
            <mat-panel-title>
              <h4 id="departmentBar-{{i}}-header" class="m0 fw420"></h4>
            </mat-panel-title>
            <mat-panel-description>
              <mat-icon (click)="deleteDepartment(i, ctrl)">close</mat-icon>
            </mat-panel-description>
          </mat-expansion-panel-header>
          <div class="mat-expansion-content">
            <!-- TimePiece Previliges Block-->
            <div class="header-permissions" fxLayout="row" fxLayoutAlign="space-between start">
              <span class="group-header">TimePiece Previliges</span>
              <span class="select_all">Select All</span>
            </div>
            <ng-template ngFor [ngForOf]="businessEntityTimePiecePermissions" let-timepiece let-mati="index">
              <div class="mt10">
                <mat-checkbox class="permission_type checkbox">
                  <strong>{{ timepiece.type }}</strong>
                </mat-checkbox>
                <ng-template ngFor [ngForOf]="timepiece.operations" let-operations>
                  <mat-checkbox class="full-width d-block permission_operations" (change)="onPermissionCheckBoxToggle($event, operations.id, ctrl.controls.permissions, mati)">
                    {{ operations.name }}
                  </mat-checkbox>
                </ng-template>
              </div>
            </ng-template>
            <!-- // TimePiece Previliges block ends -->
            <!-- SEO Previliges block -->
            <div class="header-permissions" fxLayout="row" fxLayoutAlign="space-between start">
              <span class="group-header">SEO Previliges</span>
              <span>Select All</span>
            </div>
            <ng-template ngFor [ngForOf]="businessEntitySEOPermissions" let-timepiece>
              <div class="mt10">
                <mat-checkbox class="permission_type">
                  <strong>{{ timepiece.type }}</strong>
                </mat-checkbox>
              </div>
              <ng-template ngFor [ngForOf]="timepiece.operations" let-operations>
                <mat-checkbox class="full-width d-block permission_operations" (change)="onPermissionCheckBoxToggle($event, operations.id, ctrl.controls.permissions)">
                  {{ operations.name }}
                </mat-checkbox>
              </ng-template>
            </ng-template>
            <!-- // SEO Previliges block ends -->
          </div>
        </mat-expansion-panel>
        <mat-form-field class="width-85p" id="departmentInput-{{i}}">
          <input type="text" required matInput placeholder="Search..." formControlName="department" [matAutocomplete]="autoGroup">
          <mat-error *ngIf="ctrl.controls.department.invalid">This field is required</mat-error>
          <mat-autocomplete #autoGroup="matAutocomplete">
            <mat-optgroup *ngFor="let group of filteredUserDepartmentList | async" [label]="group.casinoName" [id]="group.beID">
              <mat-option [value]="dept.DEPARTMENTID" [ngClass]="{'selected': dept.selected}" *ngFor="let dept of group.departments" (click)="departmentSelected(group, dept, i)">
                {{ dept.DEPARTMENTNAME }}
              </mat-option>
            </mat-optgroup>
          </mat-autocomplete>
          <mat-progress-spinner class="mat-spin abs-position-loader" mode="indeterminate" diameter="20" strokeWidth="2" *ngIf="priviligeRequestProgress"></mat-progress-spinner>
        </mat-form-field>
      </div>
    </div>

请问任何线索？

Answer 1

我试着在HTML中切换变量以切换已检查状态，但我无法更新formArray

您不应该这样做，事实上，您应该做相反的事情 - 更新您的表单值 - UI中的复选框将反映这些更改。

您没有分享关于权限的确切形式如何相似的最可行信息，因此permissions: this.fb.array([])的实际内容将有所帮助。但是假设权限是一个数组，它将是这样的：

 for(//iterate over indexes/controls you want to check/uncheck){
  form.get(`permissions.${index}`).setValue(true); //true to check, false to uncheck
}

这也假设权限是布尔标志。