angular - 如何隐藏 Material 按钮？

Question

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

我的按钮是灰色的( OK ):

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

显示我的按钮( OK 不隐藏 ):

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

Answer 1

您可以通过这些方法隐藏您的 mat-button
方法一:

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

在 scss 文件中

[hidden] {
  display: none !important;
}

方法二:

通过使用@leopal 推荐的 *ngIf

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

方法 3:
通过使用样式，可见性将在 View 中占据一席之地，但不会显示元素

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

或者你可以使用 style.display

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

方法 4:

您可以使用 Class 属性

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

并在您的 scss 文件中

.is-hidden {
      display: none;
 }