切换选定行中的图标

Question

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

我试图在所选行的播放和暂停图标之间切换，但是当歌曲开始播放时，整个 table 得到一个“暂停”图标（下面的示例）。

突出显示特定行效果很好，播放和暂停功能和图标之间也可以切换，

它只是切换所选行中的图标..

歌曲暂停

正在播放歌曲

Component.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>

Component.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";
      }
    }
  }

Component.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"

见working stackblitz

切换选定行中的图标

Toggle icons in a selected row

selectedindex

selecteditem

ngfor

angular