javascript - Angular 垫复选框需要单击两次才能取消选中和选中

Question

我有动态填充的复选框，但在尝试取消选中该复选框时出现问题，要求单击两次才能取消选中该复选框。

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

可以覆盖的默认mat-checkbox选项。

用户单击输入元素时的复选框单击操作。 noop:不要切换选中或不确定。 check:仅切换已检查状态，忽略不确定状态。 check-indefinate:切换检查状态，将 infiniteate 设置为 false。默认行为。未定义:与检查不确定相同。

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

可用于指定复选框单击行为的注入(inject) token 。

const MAT_CHECKBOX_CLICK_ACTION: InjectionToken<MatCheckboxClickAction>;

希望这个概念能够帮助解决您的问题