ion-spinner在等待音乐加载时

Question

在我的音乐应用程序中，我有一个“单击”功能，它会发出http请求并从服务器播放.mp3文件。我的问题是，有时应用程序需要一段时间才能从服务器获取音频，这就是为什么我添加了离子微调器的原因。我希望微调只有在音频加载后才会出现，然后消失。

Home.html中

<ion-card-content (click)="play(sound)"> 
     <div class="wrapper"> 
     <ion-spinner class="color-green" name="{{ sound.spinner }}"></ion-spinner> 
     <img src="{{ sound.imageUrl }}" />  
     </div>  

    </ion-card-content> 

Home.ts

/* Plays a sound, pausing other playing sounds if necessary */ 
    play(sound) { 



console.log(sound) 
if(this.media) {  
    this.media.pause();  
} 
this.media = new Audio(sound.file);  
this.media.load(); 
this.media.play(); 
} 

Answer 1

在Home.ts添加以下代码

<ion-card-content (click)="play(sound)"> 
     <div class="wrapper"> 
     <ion-spinner class="color-green" [name]="sound.spinner" [paused]="toggleSpinner"></ion-spinner> 
     <img src="{{ sound.imageUrl }}" />  
     </div>  

    </ion-card-content> 

在构造

toggleSpinner= false 

play(sound) { 
    toggleSpinner= true 
...... 
}