如何隐藏按钮？

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

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

<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

切换 CSS display 属性状态也会显示或隐藏该元素，它会出现在 DOM 中。但它不会在布局中占据任何space。

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

如何隐藏按钮？

How do I hide buttons?

angular-ng-if

angular