嘿，作为Angular新手碰到这种按钮切换的需求太正常啦，我来帮你把逻辑理清楚，用*ngIf完美实现你要的效果～

第一步：定义状态变量 #

首先在你的组件类（.ts文件）里定义一个专门控制编辑状态的变量，比你原来的isValid更贴合需求：

// 比如你的组件类
export class YourComponent {
  // 默认不是编辑状态，只显示Edit按钮
  isEditing = false;

  // 可以加个提交处理函数，按需实现
  handleSubmit() {
    // 这里写你的表单提交逻辑
    console.log('提交表单');
    // 提交完成后关闭编辑状态
    this.isEditing = false;
  }
}

第二步：修改模板按钮代码 #

把原来的按钮代码换成用*ngIf控制显示隐藏的版本，逻辑更直观：

<!-- Edit按钮：仅当非编辑状态时显示，点击后开启编辑模式 -->
<button id="editBtn" type="button" data-dismiss="modal" 
        (click)="isEditing = true" 
        class="btn modal-btn btn-default">
  Edit
</button>

<!-- Submit按钮：仅当编辑状态时显示，点击触发提交逻辑 -->
<button id="submitBtn" type="button" data-dismiss="modal" 
        class="btn modal-btn btn-default"
        (click)="handleSubmit()">
  Submit
</button>

<!-- Cancel按钮：仅当编辑状态时显示，点击后退出编辑模式 -->
<button id="cancelBtn" type="button" data-dismiss="modal" 
        (click)="isEditing = false" 
        class="btn modal-btn btn-default">
  Cancel
</button>

逻辑说明 #

• 默认isEditing为false，页面上只会显示Edit按钮
• 点击Edit按钮，isEditing变成true，Edit按钮隐藏，Submit和Cancel按钮自动显示
• 点击Cancel按钮，isEditing变回false，回到只显示Edit按钮的初始状态
• Submit按钮点击后，你可以在handleSubmit里处理表单提交，完成后把isEditing设为false，也能回到初始状态

为什么原来的代码有问题？ #

你之前用[disabled]只是禁用按钮，并没有真正隐藏；而且重复写了[disabled]="!isValid"，变量isValid的语义也和“编辑状态”不匹配，换成isEditing后逻辑更清晰，完全符合你要的显示/隐藏需求～

内容的提问来源于stack exchange，提问作者iymrahul