我有 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 来实现?
答案 0 :(得分:0)
有多种方法可以做到这一点。
选项 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
在 visibility
和 visible
之间切换 CSS 属性 hidden
将显示或隐藏元素,但它仍会出现在 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>