angular - 切换所选行中的图标
问题描述
工作 stacklitz - 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;
}
非常感激!
解决方案
您正在显示每首歌曲的暂停图片,您需要确保只为所选项目显示它,在您的模板中进行以下更改:
<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>
更改正在添加*ngIf="selectedRow === i"
到 img
推荐阅读
- javascript - 展示如果页面上存在特定的
- python-3.x - 如何使用 buildpack 混淆 Python 代码?
- python - 电报机器人将文本从图像发送回用户
- angular - Angular如何使用嵌套的ng-template测试嵌套组件?
- python - 在 Python 中的嵌套列表中拆分字符串并转换为浮点数?
- c# - 使用 JSON 创建 Excel
- python - 我们不能访问驻留在类中的方法中的变量吗
- r - R data.table 创建简单的自定义函数
- c# - 我将如何更改此代码以使用指定的播放器范围而不是使用 Raycast?
- javascript - 从表格导出到 Firebase 的格式