[英]How to show hide buttons in angular4
I am new to angular, so I have an edit button on clicking which I need to show two buttons ie save and cancel buttons and hide the edit button. 我是新手,因此单击时有一个编辑按钮,我需要显示两个按钮,即保存和取消按钮以及隐藏编辑按钮。 And on clicking cancel, I need to show only edit button. 在单击取消时,我只需要显示编辑按钮。 I am stuck in toggling this through angular and ngIF. 我被困在通过angular和ngIF切换。
Here is my buttons code in form: 这是我的按钮代码形式:
<button id="editBtn" type="button" data-dismiss="modal" (click)="isValid=!isValid" class="btn modal-btn btn-default" [disabled]="isValid">Edit</button>
<button id="submitBtn" [disabled]="!isValid" type="button" data-dismiss="modal" class="btn modal-btn btn-default"[disabled]="!isValid" >Submit</button>
<button id="Cancel" type="button" (click)="isValid=!isValid" data-dismiss="modal" class="btn modal-btn btn-default" [disabled]="!isValid">Cancel</button>
Earlier I was using [disabled] but now I need to show /hide. 之前我使用[disabled],但现在我需要显示/ hide。
Simply replace 只需更换
[disabled]="condition"
By 通过
*ngIf="condition"
In template 在模板中
<button (click)="enableEdit = true">Edit</button>
<button *ngIf="enableEdit">Save</button>
<button *ngIf="enableEdit" (click)="enableEdit=false">Cancel</button>
In .ts file 在.ts文件中
enableEdit: boolean = false;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.