Question

我正在使用 Angular Material 6 。我无法禁用我的mat-tree组件：

<mat-tree>
    <!-- // -->
</mat-tree>

Answer 1

<any-component *ngIf='your_condition' ... > </any-component>

会工作。例如，

 <any-component *ngIf='isShown == true' ... > </any-component>

编辑：我需要在UI上显示它。我需要使整棵树变灰

您可以使用@disabled属性

<mat-tree>
  <mat-tree-node [disabled]='isDisabled'> parent node </mat-tree-node>
  <mat-tree-node [disabled]='isDisabled'> -- child node1 </mat-tree-node>
  <mat-tree-node [disabled]='isDisabled'> -- child node2 </mat-tree-node>
</mat-tree>

Answer 2

我有同样的问题。我试图根据文档添加disable属性，但是它没有按预期工作。如果您仅禁用树节点内的元素，它将起作用

<mat-checkbox class="checklist-leaf-node"
                    [checked]="checklistSelection.isSelected(node)"
              ----> [disabled]="isDisabled" <----
                    (change)="leafNodeSelectionToggle(node)">{{node.name}}</mat-checkbox>

完整代码：

<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
    <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding [disabled]="isDisabled">
      <button mat-icon-button disabled></button>
      <mat-checkbox class="checklist-leaf-node"
                    [checked]="checklistSelection.isSelected(node)"
                    [disabled]="isDisabled"
                    (change)="leafNodeSelectionToggle(node)">{{node.name}}</mat-checkbox>
    </mat-tree-node>

    <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding [disabled]="isDisabled">
      <button mat-icon-button matTreeNodeToggle [disabled]="isDisabled">
        <mat-icon class="mat-icon-rtl-mirror">
          {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
        </mat-icon>
      </button>
      <mat-checkbox [checked]="isDescendantsAllSelected(node)"
                    [disabled]="isDisabled"
                    [indeterminate]="isDescendantPartiallySelected(node)"
                    (change)="nodeSelectionToggle(node)">{{node.name}}</mat-checkbox>
    </mat-tree-node>
  </mat-tree>

如何根据条件禁用Mat-tree组件？

2 个答案: