angular mat-checkbox 需要点击两次才能取消选中和选中

Question

I have check-boxes, that populating dynamically, but issue when trying to unselected the check box it asks two clicks to uncheck the checkbox.

enter code here
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
        <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding>
          <button mat-icon-button disabled></button>
          <mat-checkbox class="checklist-leaf-node"
                        [checked]="checklistSelection.isSelected(node)"
                        (change)="checklistSelection.toggle(node);">{{getValue(node)}}</mat-checkbox>
        </mat-tree-node>



        <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding>
          <button mat-icon-button matTreeNodeToggle
                  [attr.aria-label]="'toggle ' + node.filename">
            <mat-icon class="mat-icon-rtl-mirror">
              {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
            </mat-icon>
          </button>
          <mat-checkbox [checked]="descendantsAllSelected(node)"
                        [indeterminate]="descendantsPartiallySelected(node)"
                        (change)="todoItemSelectionToggle(node)">{{getValue(node)}}</mat-checkbox>

        </mat-tree-node>
      </mat-tree>

Answer 1

Default mat-checkbox options that can be overridden.

Checkbox click action when user click on input element. noop: Do not toggle checked or indeterminate. check: Only toggle checked status, ignore indeterminate. check-indeterminate: Toggle checked status, set indeterminate to false. Default behavior. undefined: Same as check-indeterminate.

type MatCheckboxClickAction = 'noop' | 'check' | 'check-indeterminate' | undefined;

Injection token that can be used to specify the checkbox click behavior.

const MAT_CHECKBOX_CLICK_ACTION: InjectionToken<MatCheckboxClickAction>;

Hope this concept will help to solve your problem