* ngFor ...定位循环中的特定元素（带有事件）

Question

所以情况就是这样：我有一个从ngFor循环生成的对象列表。我试图单击一个元素，并更改该特定元素的标记的内容。当用户点击元素时，我希望曲目编号显示“正在播放”。我编程的方式，它将更改应用于循环中的每个元素。

HTML：

<li class="song-block"
      *ngFor='let song of songsToDisplay'
      (click)="getSong(song)">
    <div (click)="play()" class="song-card">
      <p  *ngIf="!isPlaying"class="song-number">{{song.tracknumber}}</p>
      <p *ngIf="isPlaying"class="song-number">Playing</p>
      <p class="song-name">{{song.name}}</p>
      <p class="song-length">{{song.length}}</p>
      <svg class="explicit"
          *ngIf="albumToDisplay.isExplicit === 'true'"
          viewBox="0 0 24 24"
          preserveAspectRatio="xMidYMid meet"
          focusable="false">
            <g class="style-scope iron-icon">
              <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 6h-4v2h4v2h-4v2h4v2H9V7h6v2z"></path></g></svg>
    </div>
  </li>

打字稿：

isPlaying: boolean = false; 

play(){
    this.isPlaying = true;
    console.log(this.isPlaying)
  }

这是应用程序的视觉效果：https://i.stack.imgur.com/Onfwz.png

如何在该循环中仅定位一个特定元素？我觉得我错过了一些非常简单的东西，我不应该错过。

Answer 1

您应该将isPlaying属性添加到songsToDisplay的每个项目，并在单击目标歌曲后将目标歌曲isPlaying更改为true。然后根据它自己的isPlaying属性显示每首歌曲的播放状态。

模板：

<div (click)="play(song)" class="song-card">
  <p *ngIf="!song.isPlaying"class="song-number">{{song.tracknumber}}</p>
  <p *ngIf="song.isPlaying"class="song-number">Playing</p>
  ...
</div>

TS：

play(song){
  song.isPlaying = true;
  //console.log(this.isPlaying)
}

顺便说一句，记得当歌曲结束时，将song.isPlaying回到false。