*ngFor... 针对循环中的特定元素（带有事件）答案

【问题标题】：*ngFor... targeting a specific element in the loop (with an event)*ngFor... 针对循环中的特定元素（带有事件）
【发布时间】：2018-08-11 08:57:14
【问题描述】：

所以情况就是这样：我有一个从 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

我如何才能只针对该循环中的一个特定元素？我觉得我在这里错过了一些我不应该错过的非常简单的东西。

【问题讨论】：

标签： angular ngfor

【解决方案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。

【讨论】：