選択したアイテムをリスト内のアイコンでuser-ionic3に表示する方法

debugcn 投稿 Dev

Vignesh Ram

新しい音楽アプリを開発しています。私のプロジェクトでは、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> -> [これはアイコンです。ユーザーが特定の曲を押したときにこのアイコンを表示したい]

神秘

select（）などのメソッドを作成し、ion-itemをクリックしたときに呼び出します。

<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
}

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]