如何在列表中向用户显示具有图标的选定项
如何在列表中向用户显示具有图标的选定项
提问于 2018-06-28 07:15:12
我正在开发一个新的音乐应用程序。在我的项目中，我列出了很多歌曲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>->这是图标，我想在用户按下特定的歌曲时显示这个图标
回答 1
Stack Overflow用户
发布于 2018-06-28 16:52:10
创建一个方法，比如说选择()，当您单击离子项时，调用它。
<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
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100008700
复制相关文章
相似问题