如何在angular4中显示隐藏按钮

Question

我是新手，因此单击时有一个编辑按钮，我需要显示两个按钮，即保存和取消按钮以及隐藏编辑按钮。 在单击取消时，我只需要显示编辑按钮。 我被困在通过angular和ngIF切换。

这是我的按钮代码形式：

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

之前我使用[disabled]，但现在我需要显示/ hide。

Answer 1

只需更换

[disabled]="condition"

通过

*ngIf="condition"

Answer 2

在模板中

<button (click)="enableEdit = true">Edit</button>  
<button *ngIf="enableEdit">Save</button>  
<button *ngIf="enableEdit" (click)="enableEdit=false">Cancel</button>  

在.ts文件中

enableEdit: boolean = false;