angular - 检查后表达式已更改--> 复选框 mat-tree

问题描述

我的功能正常，但是当我切换中间值时，我得到了那个错误。不确定我是否更改了 2 个 observables，所以我应该取哪个值。IDK 哈哈！我在下面添加了我的代码。如果您需要其他任何东西，请告诉我。关于如何解决这个问题的任何想法？Man Mat 树组件太烦人了！

import { NestedTreeControl } from '@angular/cdk/tree';
import { Component, ChangeDetectorRef } from '@angular/core';
import { MatTreeNestedDataSource } from '@angular/material/tree';
import { SelectionModel } from '@angular/cdk/collections';

interface ITreeNode {
    children?: ITreeNode[];
    name: string;
    expanded: boolean;
}

const TREE_DATA = [
    {
        name: 'Land Plane',
        expanded: true,
        children: [
            { name: 'Piston', expanded: true, children: [] },
            { name: 'Jet', expanded: true, children: [] },
            { name: 'Turboprop', expanded: true, children: [] }
        ]
    },
    {
        name: 'Helicopter',
        expanded: true,
        children: [
            { name: 'Piston', expanded: true, children: [] },
            { name: 'Turboprop', expanded: true, children: [] }
        ]
    },
    {
        name: 'Amphibian',
        expanded: true,
        children: [{ name: 'Turboprop', expanded: true, children: [] }]
    },
    {
        name: 'Tiltwing',
        expanded: true,
        children: [{ name: 'Turboprop', expanded: true, children: [] }]
    },
    {
        name: 'Gyrocopter',
        expanded: true,
        children: [{ name: 'Piston', expanded: true, children: [] }]
    },
    {
        name: 'Tower',
        expanded: true,
        children: []
    },
    {
        name: 'Gyrocopter',
        expanded: true,
        children: []
    }
];

@Component({
    selector: 'globe-source-facets',
    templateUrl: './globe-source-facets.component.html',
    styleUrls: ['./globe-source-facets.component.scss']
})
export class GlobeSourceFacetsComponent {
    public nestedTreeControl: NestedTreeControl<ITreeNode>;
    public nestedDataSource: MatTreeNestedDataSource<ITreeNode>;
    public checklistSelection = new SelectionModel<ITreeNode>(true);
    constructor(private changeDetectorRef: ChangeDetectorRef) {
        this.nestedTreeControl = new NestedTreeControl<ITreeNode>(
            this.getChildren
        );
        this.nestedDataSource = new MatTreeNestedDataSource();
        this.nestedDataSource.data = TREE_DATA;
    }

    public hasNestedChild = (_: number, nodeData: ITreeNode) =>
        nodeData.children.length > 0;

    public getChildren = (node: ITreeNode) => node.children;

    public changeState(node) {
        node.expanded = !node.expanded;
    }

    descendantsAllSelected(node: ITreeNode): boolean {
        const descendants = this.nestedTreeControl.getDescendants(node);
        if (!descendants.length) {
          return this.checklistSelection.isSelected(node);
        }
        const selected = this.checklistSelection.isSelected(node);
        const allSelected = descendants.every(child => this.checklistSelection.isSelected(child));
        if (!selected && allSelected) {
          this.checklistSelection.select(node);
          this.changeDetectorRef.markForCheck();
        }
        return allSelected;
      }

    public descendantsPartiallySelected(node: ITreeNode): boolean {
        const descendants = this.nestedTreeControl.getDescendants(node);
        if (!descendants.length) {
        return false;
        }
        const result = descendants.some(child => this.checklistSelection.isSelected(child));
        return result && !this.descendantsAllSelected(node);
    }

    public todoItemSelectionToggle(node: ITreeNode): void {
        this.checklistSelection.toggle(node);
        const descendants = this.nestedTreeControl.getDescendants(node);
        this.checklistSelection.isSelected(node)
            ? this.checklistSelection.select(...descendants)
            : this.checklistSelection.deselect(...descendants);
    }
}

<div class="facets-container">
    <div class="tree-container">
        <mat-tree
            [dataSource]="nestedDataSource"
            [treeControl]="nestedTreeControl"
            class="example-tree"
        >
            <mat-tree-node *matTreeNodeDef="let node" disabled="true">
                <li class="mat-tree-node">
                    <button mat-icon-button disabled></button>
                    <mat-checkbox
                        class="checklist-leaf-node"
                        [checked]="checklistSelection.isSelected(node)"
                        (change)="todoItemSelectionToggle(node)"
                        >{{ node.name }}</mat-checkbox
                    >
                </li>
            </mat-tree-node>

            <mat-nested-tree-node
                *matTreeNodeDef="let node; when: hasNestedChild"
            >
                <li>
                    <div class="mat-tree-node">
                        <button
                            mat-icon-button
                            [attr.aria-label]="'toggle ' + node.name"
                            (click)="changeState(node)"
                        >
                            <mat-icon class="mat-icon-rtl-mirror">
                                {{
                                    node.expanded
                                        ? 'chevron_right'
                                        : 'expand_more'
                                }}
                            </mat-icon>
                        </button>
                        <mat-checkbox
                            *ngIf="node.name !== ''"
                            class="checklist-leaf-node"
                            [checked]="checklistSelection.isSelected(node)"
                            [indeterminate]="descendantsPartiallySelected(node)"
                            (change)="todoItemSelectionToggle(node)"
                            >{{ node.name }}</mat-checkbox
                        >
                    </div>
                    <ul [class.example-tree-invisible]="node.expanded">
                        <ng-container matTreeNodeOutlet></ng-container>
                    </ul>
                </li>
            </mat-nested-tree-node>
        </mat-tree>
    </div>
    <div class="facet-actions">
        <button mat-button>CLEAR</button>
        <button mat-button color="primary">APPLY</button>
    </div>
</div>

标签： angulartypescriptangular-material

angular - 检查后表达式已更改--> 复选框 mat-tree

问题描述

解决方案

推荐阅读