时间戳

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

angular - 如何隐藏按钮？

问题描述

我有 bool isEditable

我的按钮：

<button mat-button color="primary" class="btn-block" type="button" (click)="enableEdit()">Edit</button>

<button mat-button color="primary" class="btn-block" type="submit" [disabled]="!registerForm.valid">Register</button>

如果 isEditable = true 我想编辑按钮隐藏。如果 isEditable = false 我想注册按钮隐藏。

我如何用 ngif 来做呢？

标签： angularangular-ng-if

解决方案

有多种方法可以做到这一点。

选项1：*ngIf

当条件不满足时，插入条件 using*ngIf不会在 DOM 中生成元素。

<button 
  mat-button 
  color="primary" 
  class="btn-block" 
  *ngIf="isEditable; else edit"
  type="submit" 
  [disabled]="!registerForm.valid"
>
  Register
</button>

<ng-template #edit>
  <button
    mat-button 
    color="primary" 
    class="btn-block" 
    type="button" 
    (click)="enableEdit()"
  >
    Edit
  </button>
</ng-template>

选项 2：CSSvisibility

在和visibility之间切换 CSS 属性会显示或隐藏元素，但它仍会出现在 DOM 中并占据布局中的空间。visiblehidden

<button
  mat-button 
  color="primary" 
  class="btn-block" 
  [style.visiblity]="isEditable ? 'hidden' : 'visible'"
  type="button" 
  (click)="enableEdit()"
>
  Edit
</button>

<button 
  mat-button 
  color="primary" 
  class="btn-block" 
  [style.visiblity]="isEditable ? 'visible' : 'hidden'"
  type="submit" 
  [disabled]="!registerForm.valid"
>
  Register
</button>

选项 3：CSSdisplay

切换 CSSdisplay属性状态也会显示或隐藏元素，并且它会出现在 DOM 中。但它不会占用布局中的任何空间。

<button
  mat-button 
  color="primary" 
  class="btn-block" 
  [style.display]="isEditable ? 'none' : 'block'"
  type="button" 
  (click)="enableEdit()"
>
  Edit
</button>

<button 
  mat-button 
  color="primary" 
  class="btn-block" 
  [style.display]="isEditable ? 'block' : 'none'"
  type="submit" 
  [disabled]="!registerForm.valid"
>
  Register
</button>

推荐阅读