如何在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;