如何隐藏材质按钮？

Question

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

我的按钮是灰色的（OK）：

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

Answer 1

你可以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;
 }