时间戳

首页 > 解决方案 > 如何隐藏材质按钮？

angular - 如何隐藏材质按钮？

问题描述

我想隐藏我的材质按钮，但它不起作用。

我的按钮是灰色的（确定）：

<button mat-raised-button class="mat-primary" (click)="deleteClick()" [disabled]="data.createMode">
    <mat-icon>delete_forever</mat-icon>DELETE
</button>

显示我的按钮（确定未隐藏）：

<button mat-raised-button class="mat-primary" (click)="deleteClick()" [hidden]="data.createMode">
    <mat-icon>delete_forever</mat-icon>DELETE
</button>

标签： angularangular-materialmaterial-ui

解决方案

你可以mat-button通过这些方法隐藏你的

方法一：

<button mat-button [hidden]="true">Basic</button>

在 scss 文件中

[hidden] {
  display: none !important;
}

方法二：

通过使用*ngIf@leopal 推荐的

<button mat-raised-button class="mat-primary" (click)="deleteClick()" *ngIf="!data.createMode">
    <mat-icon>delete_forever</mat-icon>DELETE
</button>

方法3： 通过使用样式，可见性将在视图中占据他的位置，但不会显示元素

<button mat-button [style.visibility]="true ? 'hidden': 'visible'">Basic</button>

或者你可以使用style.display

<button mat-button [style.display]="true ? 'none': ''">Basic</button>

方法四：

你可以使用Class属性

<button mat-button [class.is-hidden]="true">Basic</button>

在你的 scss 文件中

.is-hidden {
      display: none;
 }

推荐阅读