I am currently working with a table that contains a list of songs. My goal is to toggle the source of an icon in a specific row based on its index (for actions like play/pause, like/unlike). However, at the moment, the icon only changes in the first row regardless of the selected row.
You can find the working stackblitz example here: https://stackblitz.com/edit/github-zhvgft?file=src/app/play-list-page/play-list-page.component.html
Component.html
<table *ngIf="playListSongs.tracks.length > 0">
<thead>
<tr>
<th></th>
<th></th>
<th>title</th>
<th>artist</th>
<th>album</th>
<th>release date</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let song of playListSongs?.tracks | search:searchTerm; let i = index;" [class.selected]="i==selectedRow">
<td>
<img src="../assets/play_line_icon.png" class="playBtn" (click)="togglePlaystateSong(song.track_id);getSongInfo(song);setClickedRow(i)" id="imgClickAndChange">
</td>
<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>
</tbody>
</table>Component.ts
//Row's index
setClickedRow(index: any) {
this.selectedRow = index;
console.log("this.selectedRow index:", this.selectedRow);
}
//Toggle liked/unlike
toggleLikedSongs(id:any){
let likedImg = <HTMLInputElement>document.getElementById("likedImg");
this.playListsAPI.getLikeSongs().subscribe(data=>{
this.likedSongsArray = data
})
for(let i=0;i<this.likedSongsArray.liked_tracks.length;i++){
if(this.likedSongsArray.liked_tracks[i].track_id == id){
this.playListsAPI.MarklikedSongs(id,false).subscribe((data:any)=>{
this.likedSong = data
console.log("removed:", id);
likedImg.src = "../assets/not_liked.png"
})
break;
} else {
this.playListsAPI.MarklikedSongs(id,true).subscribe((data:any)=>{
this.likedSong = data
console.log(" added:", id, this.selectedRow);
likedImg.src = "../assets/liked.png"
})
break;
}
}
}
//Toggle play/pause
togglePlaystateSong(id: 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();
image.src = "../assets/pause_line_icon.png";
image2.src = "../assets/controller_icons/bar_pause.png";
} else {
if (this.player.paused) {
this.player.play();
image.src = "../assets/pause_line_icon.png";
image2.src = "../assets/controller_icons/bar_pause.png";
} else {
this.player.pause();
image.src = "../assets/play_line_icon.png";
image2.src = "../assets/controller_icons/bar_play.png";
}
}
}Your help is greatly appreciated!