не отменен выбор элемента при использовании дерева Angular

Question

Я построил дерево в Angular

Демо

В этом дереве есть 3 уровня, в компоненте мне нужно предварительно выбрать дерево и он работает нормально, но когда я снимаю галочки с пунктов, он не работает.

Например, я снял все пункты, но в них все еще есть. Я ожидаю, что this.checklistSelection.selected будет пустым, но в нем есть все элементы.

В чем проблема? Как я могу решить эту проблему?

это мой html:

<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);">{{node.name}}</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)">{{node.name}}</mat-checkbox>
</mat-tree-node>

ts Код:

   descendantsAllSelected(node: ItemFlatNode): boolean {
    this.selectedList.emit(this.checklistSelection.selected);
    const descendants = this.treeControl.getDescendants(node);
    return (this.checklistSelection.isSelected(node) && descendants.length == 0) || (descendants.length > 0 && descendants.every(child => this.checklistSelection.isSelected(child)));
  }

  /** Whether part of the descendants are selected */
  descendantsPartiallySelected(node: ItemFlatNode): boolean {
    const descendants = this.treeControl.getDescendants(node);
    const result = descendants.some(child => this.checklistSelection.isSelected(child));
    return result && !this.descendantsAllSelected(node);
  }

  /** Toggle the to-do item selection. Select/deselect all the descendants node */
  todoItemSelectionToggle(node: ItemFlatNode): void {
    this.checklistSelection.toggle(node);
    const descendants = this.treeControl.getDescendants(node);
    this.checklistSelection.isSelected(node)
      ? this.checklistSelection.select(...descendants)
      : this.checklistSelection.deselect(...descendants);
  }