Отключить иконку мат в узел дерева матов

Question

Мне нужен ответ на этот вопрос: можно ли отключить значок мата внутри узла дерева матов?

Итак, позвольте мне показать вам мой код. Видя текущий узел дерева матов:

 <mat-tree [dataSource]="ListView" [treeControl]="treeControl">
 <mat-tree-node
                *matTreeNodeDef="let node"
                matTreeNodePadding
                matTreeNodePaddingIndent="20"
                class="mat-tree-node node-level-last hover"
            >
                <button class="cursor-default" mat-icon-button disableRipple="true"></button>
                <div class="zone-action">
                <div > {{ node.item.name }} </div> 

                    <div class="icon-hover" *ngIf="!node.item.CanVisualize">

                        <div *ngIf="isEnabled">
                           <mat-icon
                                svgIcon="pencil"
                                color="primary"
                                (click)="actionReport(node.item, 'update'); $event.stopPropagation()"
                            ></mat-icon>
                        </div>
                    </div>
                </div>
            </mat-tree-node> 

Я хотел бы получить доступ к списку, открытому выбором узла дерева матов, но пока не могу. Таким образом, у вас есть привязка свойства "{{node.item.name}}", которая отображает информацию относительно выбранного объекта, которую вы должны знать, чтобы перейти к навигации по компоненту, и ее необходимо отключить или скрыть значок mat внутри <div *ngIf="isEnabled">.

Но при добавлении структурной директивы, такой как ng-if в родительском узле HTML, сотрите node.item.name, напечатав пустое поле, поведение которого явно не тот искал.

Answer 1

Предложение

  <button mat-icon-button ngIf="isEnabled" (click)="actionReport(node.item, 'update'); $event.stopPropagation()">
    <mat-icon>favorite</mat-icon>
  </button>
  <button mat-icon-button ngIf="!isEnabled" disabled>
    <mat-icon>favorite</mat-icon>
  </button>

https://material.angular.io/components/button/examples

Answer 2

Во-первых, вы должны использовать <button mat-icon-button> вместо директивы <mat-icon>:

<button mat-icon-button (click)="onButtonClick()">
  <mat-icon>pencil</mat-icon>
</button>

против

<mat-icon (click)="onButtonClick()">pencil</mat-icon>

Во-вторых, вы можете использовать вход disabled, который класс MatButton (по сути, директива для button[mat-*-button]) предоставляет:

<button mat-icon-button [disabled]="isEnabled">
  <mat-icon svgIcon="pencil"></mat-icon>
</button>

Обратите внимание, что директива <mat-icon> не поддерживает ввод disabled.