Question

我正在开发一个新的音乐应用程序。在我的项目中，我在home页面列出了很多歌曲。

因此，每当用户按下列表中的特定歌曲时，我想用某些图标突出显示该特定歌曲并将其显示给用户

我在这里分享我的代码

home.html

 <ion-content>

  <ion-list>

  <ion-item *ngFor="let track of myTracks" style="margin: 15px;margin-left: 
   0px; height: 61px;" (click)="currentTrack = track">

  <ion-thumbnail item-left style="margin-left: -15px;margin-top: 29px;">
   <img src="{{track.art}}" style="height: 60px; width: 60px;">
   </ion-thumbnail>
  <h2 style="color:white;font-size: 14px;margin-top: 30px;">{{track.artist}} 
   </h2>
  <p style="color: white;font-size: 12px;">{{track.title}}</p>

  <ion-icon name="ios-musical-notes"></ion-icon> --> [ this is the icon.I 
  want to show this icon when user press the particular song ]


  <ion-icon name="md-more" style="float: right;color: white 
  !important;position: relative; bottom: 34px; left: -8px; font-size: 28px; 
  " (click)="list()"></ion-icon>

  </ion-item>

  </ion-list>


   </ion-content>

  <ion-footer style="background-color: #1E1132;margin: -17px;margin-left: 
   1px;" >

 <audio-track #audioTrack [track]="currentTrack" [autoplay]="true" 
 (onFinish)="onTrackFinished($event)">
 <div style="display: flex;position: relative;top: 27px;">
 <button clear  (click)="change()" style="background-color: #1e1132;margin- 
 left: 20px;">
 <ion-icon name="pause" *ngIf="!visible" (click)="audioTrack.pause()"></ion- 
 icon>
  <ion-icon name="play" *ngIf="visible" (click)="audioTrack.canPlay ? 
  audioTrack.play() : next()" style="color: #FD4217 !important;"></ion-icon>
  </button>

 <audio-track-progress-bar duration progress [audioTrack]="audioTrack" 
 style="width: 100%; margin: 0 10px;color: white"></audio-track-progress- 
 bar>
 </div>
 <div style="display: flex; justify-content: center; height: 50px;">
 <div *ngIf="audioTrack"><h4 style="color: white;position: relative;bottom: 
  60px;right: 31px;">{{ audioTrack?.artist }}</h4></div>
 <ion-spinner *ngIf="audioTrack && audioTrack.isLoading"></ion-spinner>
  </div>
  </audio-track>

 <ion-icon name="ios-fastforward-outline" style="color: white;float: 
 left;position: relative;bottom: 32px;left: 98px;" (click)="next()"></ion- 
 icon>
  <ion-icon name="ios-rewind-outline" style="color: white;float: 
  left;position: relative;bottom: 32px;left: 54px;"></ion-icon>

</ion-footer>

<ion-icon name="ios-musical-notes"></ion-icon> - ＆gt; [这是图标。我想要在用户按下特定歌曲时显示此图标]

Answer 1

创建方法，例如 select（），并在点击离子项时调用它

<ion-item *ngFor="let track of myTracks" style="margin: 15px;margin-left: 0px; height: 61px;" (click)="select(track); currentTrack = track">

你的离子图标应该有一个显示的条件

<ion-icon *ngIf="isSelected(track)" name="ios-musical-notes"></ion-icon>

在ts文件中，添加以下内容：

itemSelected;

constructor(.....){

}

// called when you click the track
select(track){

   //if the track was selected already, unselect it; else select this track. 
   if(this.isSelected(track)){     
       this.itemSelected = null;    
   }else{
       this.itemSelected = track;
}

// check the selected track, if true then show icon
isSelected(track){
    return this.itemSelected === track; // the track that you selected
}

如何将列表中带有图标的选定项目显示给user-ionic3

1 个答案: