*ngFor... 以循环中的特定元素为目标（带有事件）

Question

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

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

您应该在songsToDisplay的每一项中添加isPlaying 属性，并在点击目标歌曲后将目标歌曲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。

*ngFor... 以循环中的特定元素为目标（带有事件）

*ngFor... targeting a specific element in the loop (with an event)

ngfor

angular