如何隐藏按钮？

Question

我有 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 来实现？

Answer 1

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

选项 1：*ngIf

当条件不满足时，使用*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：CSS visibility

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

<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：CSS display

切换 CSS display 属性状态也会显示或隐藏元素，并且它会出现在 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>