Как показать выбранный элемент со значком в списке пользователю-ionic3

Question

Я разрабатываю новое музыкальное приложение.В моем проекте я перечислил много песен на странице home.

Поэтому, когда пользователь нажимает конкретную песню в списке, я хочу выделить эту песню несколькими значками и показать ее пользователю * 1004.*

Здесь я делюсь своими кодами

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> -> [это значок.Я хочу показать этот значок, когда пользователь нажимает конкретную песню]

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
}