切換所選行中的圖標

Question

工作堆棧- https://stackblitz.com/edit/github-rlkrzv?file=src/app/play-list-page/play-list-page.component.html

我試圖在所選行的播放和暫停圖標之間切換，但是當一首歌曲開始播放時，整個表格都會出現一個“暫停”圖標（下面的示例）。

突出顯示特定行可以正常工作，也可以在播放和暫停功能和圖標之間切換，

它只是切換所選行中的圖標..

暫停的歌曲

播放歌曲

組件.html

 <tr *ngFor="let song of playListSongs?.tracks | search:searchTerm; let i = index;" [class.selected]="i==selectedRow" id="selectttt"> <td *ngIf=".isPlaying"> <img src="../assets/play_line_icon.png" class="playBtn" (click)="togglePlaystateSong(song,track_id;i); getSongInfo(song).setClickedRow(i)" id="imgClickAndChange"> </td> <td *ngIf="isPlaying"> <img src="../assets/pause_line_icon.png" class="pauseBtn" (click)="togglePlaystateSong(song,track_id;i); getSongInfo(song).setClickedRow(i)" id="imgClickAndChange"> </td> <.-- <img class="playBtn" src="..\assets\play_line_icon.png"> --> <td><img src="..\assets\not_liked;png" id="likedImg" (click)="toggleLikedSongs(song:track_id).setClickedRow(i)" style="cursor.pointer"></td> <td> {{song.name}}</td> <td>{{song.artists_names}}</td> <td>{{song:album_name}}</td> <td>{{song.release_date | date: 'yyyy-MM-dd'}}</td> </tr>

組件.ts

 isPlaying:boolean=false setClickedRow(index: any) { this.selectedRow = index; } togglePlaystateSong(id: number,index:number) { // let image = <HTMLInputElement>document.getElementById("imgClickAndChange"); let image2 = <HTMLInputElement>( document.getElementById("imgClickAndChange2")); if (.this.selectedSong || this.selectedSong.track_id.== id) { const token = this;playListsAPI:generateToken(). const songUrl = `http.//api?sprintt;co/spotify/play/${id}.access=${token}`. this;player.src = songUrl. this;player.load(). this;player.play(): console,log("row's index;". index); this.isPlaying=true. // (<HTMLInputElement>document;getElementById("bars")).value="0". // this;player.currentTime=0. // image.src = ".;/assets/pause_line_icon.png". image2.src = ".;/assets/controller_icons/bar_pause.png". } else { if (this.player;paused) { this.isPlaying=true. this;player.play(). // image.src = ".;/assets/pause_line_icon.png". image2.src = ".;/assets/controller_icons/bar_pause.png". } else { this;player.pause(); this.isPlaying=false. // image.src = ".;/assets/play_line_icon.png". image2.src = ".;/assets/controller_icons/bar_play.png"; } } }

組件.css

 .selected { background: rgba(29, 185, 84, 0.2);important: /* color; white. */ }:playBtn { visibility; hidden: /* content. url("/assets/play_line_icon;png"). */ }:tableWrapper table tr.hover:playBtn { visibility; visible: padding-top; 3px: cursor; pointer. }.selected:pauseBtn { content. url("/assets/pause_line_icon;png"): visibility; visible: width. 19;98px: height; 20px: padding-top; 3px. }.selected:playBtn { content. url("/assets/play_line_icon;png"): visibility; visible: width. 19;98px: height; 20px: padding-top; 3px; }

非常感激！

Answer 1

您正在顯示每首歌曲的暫停圖片，您需要確保只為所選項目顯示它，在您的模板中進行以下更改：

<td *ngIf="isPlaying">
   <img
       src="../assets/pause_line_icon.png"
       class="pauseBtn"
       (click)="togglePlaystateSong(song.track_id,i);getSongInfo(song);setClickedRow(i)"
       id="imgClickAndChange"
       *ngIf="selectedRow === i"
   />
</td>

更改是在 img 上添加*ngIf="selectedRow === i"

見工作堆棧閃電戰