Question

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

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

<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

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

Answer 2

您可以通过以下方法隐藏mat-button

方法1：

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

在scss文件中

[hidden] {
  display: none !important;
}

方法2：

使用@leopal推荐的*ngIf

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

方法4：

您可以使用Class属性

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

并在您的scss文件中

.is-hidden {
      display: none;
 }

Answer 3

在hidden指令上没有mat-button属性，就像在官方docs上看到的那样。

不过，您可以采用有角度的方法，并使用ngIf指令。

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

Answer 4

在angular中，您可以选择以2种方式从呈现的html中隐藏元素，方法是使用* ngIf将其从DOM中删除，或者使用[hidden] attrubute将其隐藏，但不会从DOM中仅隐藏在视图，尝试用alwaise删除元素而不是将其隐藏：

https://www.talkingdotnet.com/dont-use-hidden-attribute-angularjs-2/。

因此只需应用* ngIf，但要知道您使用的是哪种类型的ChangeDetection，如果其他某些组件可以更改* ngIf状态的状态，则有时您需要清理并手动应用changeDetection。

如何隐藏材质按钮？

4 个答案: