Angular 如何向user-ionic3显示列表中带有图标的选定项目
我正在开发一个新的音乐应用程序。在我的项目中,我在Angular 如何向user-ionic3显示列表中带有图标的选定项目,angular,ionic3,Angular,Ionic3,我正在开发一个新的音乐应用程序。在我的项目中,我在home页面中列出了很多歌曲 所以,每当用户按下列表中的特定歌曲时,我想用一些图标突出显示该特定歌曲,并将其显示给用户 这里我分享我的代码 home.html {{track.artist}} {{track.title} -->[这是图标,我 希望在用户按特定歌曲时显示此图标] {{音轨?.artist}} -->[这是图标。I 想在用户按下特定歌曲时显示此图标吗?创建一个方法,比如说选择(),并在单击离子项时调用它 <ion-ite
home
页面中列出了很多歌曲
所以,每当用户按下列表中的特定歌曲时,我想用一些图标突出显示该特定歌曲,并将其显示给用户
这里我分享我的代码
home.html
{{track.artist}}
{{track.title}
-->[这是图标,我
希望在用户按特定歌曲时显示此图标]
{{音轨?.artist}}
-->[这是图标。I
想在用户按下特定歌曲时显示此图标吗?创建一个方法,比如说选择(),并在单击离子项时调用它
<ion-item *ngFor="let track of myTracks" style="margin: 15px;margin-left: 0px; height: 61px;" (click)="select(track); currentTrack = track">
我得到以下错误-->在
主页
页面中找不到选中的项,无论是否选中已选择代码>或项代码>。我尝试了isSelected代码>。但它不工作。我编辑了我的答案。所选项目应在构造函数外部和之前
<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>
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
}