如何在角度4中显示隐藏按钮答案

【问题标题】：How to show hide buttons in angular4如何在角度4中显示隐藏按钮
【发布时间】：2018-01-08 08:09:42
【问题描述】：

我是 Angular 的新手，所以我有一个编辑按钮，点击它我需要显示两个按钮，即保存和取消按钮并隐藏编辑按钮。在点击取消时，我只需要显示编辑按钮。我被困在通过 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。

【问题讨论】：

您可以使用“隐藏”而不是“禁用”。如果您不想将按钮全部放在 dom 中，则可以使用 *ngIf，如 trichetriche 的回答中所建议的那样

标签： angular uibutton angular4-forms angular-forms

【解决方案1】：

简单替换

[disabled]="condition"

由

*ngIf="condition"

【讨论】：

【解决方案2】：

在模板中

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

在.ts文件中

enableEdit: boolean = false;

【讨论】：