Angular 2+ 行内编辑如何实现悬停行时显示编辑按钮

方案1：纯CSS实现（零组件逻辑改动，性能最优） #

这个方案不需要修改Angular组件的TypeScript代码，仅通过类名选择器控制按钮显隐，是最轻量的实现方式：

1. 调整模板中三个操作按钮的类名，做明确标识，避免选择器误伤其他元素

   <div class="form-group" [ngClass]="{'editing': editing.given_name}">
     <label for="number">First Name</label>
     <input  
       type="text"
       class="form-control"
       formControlName="given_name"
       id="given_name"
       placeholder="Jane"
     />
     <div class="value">{{user.given_name}}</div>
     <!-- 给操作按钮加专属标识类 -->
     <button class="action-btn edit-btn" (click)="toggleEdit('given_name')">Edit</button>
     <button class="action-btn accept-btn" (click)="accept('given_name')">Accept</button>
     <button class="action-btn cancel-btn" (click)="toggleCancel('given_name')">Cancel</button>
   </div>
   

2. 补充对应CSS规则，按交互状态控制显隐：

   /* 所有操作按钮默认隐藏 */
   .form-group .action-btn {
     display: none;
   }
   /* 非编辑状态下，鼠标悬停行区域时，仅显示Edit按钮 */
   .form-group:not(.editing):hover .edit-btn {
     display: inline-block;
   }
   /* 编辑状态下，隐藏Edit按钮，显示Accept、Cancel按钮 */
   .form-group.editing .accept-btn,
   .form-group.editing .cancel-btn {
     display: inline-block;
   }
   

方案2：Angular事件绑定实现（支持扩展联动逻辑） #

如果后续需要在悬停场景加其他联动效果（比如行高亮、操作提示），可以通过组件状态变量控制显隐：

1. 在外层form-group容器上绑定鼠标进入、离开事件，维护当前行的悬停状态：

   <div 
     class="form-group" 
     [ngClass]="{'editing': editing.given_name}"
     (mouseenter)="isRowHover = true"
     (mouseleave)="isRowHover = false"
   >
     <label for="number">First Name</label>
     <input  
       type="text"
       class="form-control"
       formControlName="given_name"
       id="given_name"
       placeholder="Jane"
     />
     <div class="value">{{user.given_name}}</div>
     <!-- Edit按钮加显隐判断：仅当非编辑状态、行被悬停时才显示 -->
     <button 
       *ngIf="!editing.given_name && isRowHover"
       (click)="toggleEdit('given_name')"
     >
       Edit
     </button>
     <!-- 编辑态下才显示Accept、Cancel按钮 -->
     <button *ngIf="editing.given_name" (click)="accept('given_name')">Accept</button>
     <button *ngIf="editing.given_name" (click)="toggleCancel('given_name')">Cancel</button>
   </div>
   

2. 在组件类中初始化悬停状态变量即可：

   // 组件类内定义
   isRowHover = false;
   

落地注意事项 #

• 悬停触发范围要覆盖整个form-group行区域，不要只把按钮本身作为触发区，避免鼠标稍微偏移就导致按钮消失，打断操作流程
• 编辑状态下必须屏蔽悬停显示Edit的逻辑，防止编辑过程中Edit按钮突然弹出干扰输入
• 移动端场景无鼠标悬停交互，可加设备判断逻辑，让Edit按钮在移动端保持默认显示，避免用户找不到操作入口

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