在 mat-tree-node 中禁用 mat 图标答案

【问题标题】：Disable mat icon into mat-tree-node在 mat-tree-node 中禁用 mat 图标
【发布时间】：2020-05-21 16:12:49
【问题描述】：

我需要这个问题的答案：是否可以在 mat-tree-node 中禁用 mat-icon？

那么让我向您展示我的代码。看到现在的 mat-tree-node:

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

我想访问通过选择 mat-tree-node 打开的列表，但我暂时不能。因此，您拥有属性绑定“{{ node.item.name }}”，它显示与所选对象相关的信息，您需要知道这些信息以便继续组件的导航，并且需要禁用或隐藏<div *ngIf="isEnabled"> 中的 mat-icon。

但是在 HTML 父节点中添加一个像 ng-if 这样的结构指令会删除 node.item.name，打印一个空字段，这显然不是搜索的行为。

【问题讨论】：

标签： html css angular angular-material

【解决方案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

【讨论】：

我已经试过把div改成button了，好像不行。
我认为问题来自 isEnabled 的值，它似乎是未定义的，所以实际上问题可能不是来自那个......抱歉浪费你的时间。
您可以改为绑定到disabled 输入。您不必使用*ngIf。（即使那样，您的答案也不起作用，因为您需要在 ngIf 后面加一个星号。）

【解决方案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>

其次，您可以使用MatButton 类（本质上是button[mat-*-button] 的指令）公开的disabled 输入：

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

请注意，<mat-icon> 指令不支持 disabled 输入。

【讨论】：