Question

我可以使用该功能，但是当我切换中间体的值时，我得到了该错误。不知道我是否在改变2个可观察值，所以它像我应该取哪个值。 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>

Answer 1

此问题比看起来要复杂。这与Angular的工作方式有关。

基本上，角生命周期从父组件开始，到子组件，然后再回到父组件并结束。

正在发生的事情是，生命周期从父级开始，某个变量值为 A ，它一直向下到组件树，当返回父级时，该值现在是 B ，Angular知道该值已更改并显示此错误。此错误的意思是：“老兄，在我执行生命周期时，值已更改，无法确定视图是否使用持久值绘制”

要解决此问题？尝试使用生命周期函数，而不要在构造函数上执行操作。

Answer 2

像视图中的以下所示那样在嵌套节点中更改检查条件可以消除错误：

import warnings
warnings.filterwarnings("ignore", category=DeprecationWarning)

要在取消选择最后一个子节点后修复具有父节点状态的错误，请更改todoItemSelectionToggle（）方法，如下所示：

   <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]="descendantsAllSelected(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>

这些来自带有https://material.angular.io/components/tree/examples

复选框的示例

检查没有子节点的节点在平面树视图中的差异。

选中后表达式已更改->复选框mat-tree

2 个答案: