Как отключить компонент дерева Mat на основе условия?

Question

Я использую Угловой материал 6 . Я не могу отключить компонент дерева матов:

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

Answer 1

У меня была такая же проблема. Я попытался добавить атрибут отключения в соответствии с документацией, но он не работает должным образом. Это будет работать, если вы просто отключите элементы внутри узлов дерева

<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>

Answer 2

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

будет работать.Для экземпляра

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

Редактировать: мне нужно показать его в пользовательском интерфейсе.Мне нужно серое дерево целиком

, вы можете использовать атрибут @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>