Angular列表项mouseover/mouseout独立显示问题解决求助

嘿，这个问题我太熟悉啦！你现在遇到的核心问题是：所有列表项共享了同一个options布尔变量——当你hover任意一项时，这个变量变成true，所有绑定了*ngIf="options"的元素都会跟着显示出来。咱们得给每个歌曲项单独维护一个hover状态，这样就能实现只显示当前hover项的内容了，给你两种实用方案：

方案一：给每个歌曲对象添加独立的hover状态属性 #

这个方案直接给每个song对象加一个专属的options属性，让每个项的状态互不干扰：

1. 修改TS代码，初始化每个song的状态
   在你获取到歌曲列表的地方（比如ngOnInit或者数据请求的回调里），给每首歌添加options属性并设为初始值false：

   // 原来的全局options变量可以删掉啦，不用了
   
   ngOnInit(): void {
     // 假设你是通过服务获取歌曲列表的，示例代码：
     this.yourSongService.getLibrarySongs().subscribe(songs => {
       // 给每个song扩展一个options属性，初始为false
       this.librarySongs = songs.map(song => ({ ...song, options: false }));
     });
   }
   

2. 修改HTML模板，绑定到当前song的状态
   把鼠标事件和*ngIf的条件都改成绑定当前循环项的song.options：

   <div class="col-sm-2" style="margin-top: 15px;" *ngFor="let song of librarySongs">
     <!-- 注意：id不要重复，改成class更合适 -->
     <div class="container" (mouseover)="song.options=true" (mouseout)="song.options=false">
       <img style="border-radius: 3px;" [src]="song.url" height="135px" width="135px">
       <!-- 同样把id改成class -->
       <div class="example" *ngIf="song.options">
         <span style="float: left;color:#2cd4bb;font-size: 12px">ASSIGN</span>
         <span style="float: right;color:#2cd4bb; font-size: 12px; ">DELETE</span>
       </div>
     </div>
   </div>
   

方案二：用变量存储当前hover的歌曲ID（不修改原对象） #

如果你不想修改后端返回的song对象结构，可以用一个变量来记录当前hover的歌曲ID，通过ID匹配来控制显示：

1. 修改TS代码，定义存储hover ID的变量

   hoveredSongId: number | null = null; // 假设你的song有id属性，类型根据实际调整
   
   ngOnInit(): void {
     // 原来的初始化逻辑保留，不用全局options了
   }
   

2. 修改HTML模板，通过ID匹配控制显示

   <div class="col-sm-2" style="margin-top: 15px;" *ngFor="let song of librarySongs">
     <div class="container" 
          (mouseover)="hoveredSongId = song.id" 
          (mouseout)="hoveredSongId = null">
       <img style="border-radius: 3px;" [src]="song.url" height="135px" width="135px">
       <div class="example" *ngIf="hoveredSongId === song.id">
         <span style="float: left;color:#2cd4bb;font-size: 12px">ASSIGN</span>
         <span style="float: right;color:#2cd4bb; font-size: 12px; ">DELETE</span>
       </div>
     </div>
   </div>
   

额外小提示 #

模板里的id="container"和id="example"在*ngFor循环里会生成重复的ID，这不符合HTML规范（ID必须唯一），建议改成class哦，避免后续出现奇怪的DOM问题~

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