在等待音乐加载时离子旋转器（离子2 /角2）

Question

在我的音乐应用程序中，我有一个“点击”功能，它会发出http请求并从服务器播放.mp3文件。我的问题是，有时需要一段时间才能从服务器加载音频，这就是为什么我添加了离子微调器的原因。我试图让它在this.media.load();载入音乐时显示离子微调器，当它完成加载时，微调器被隐藏。

我不知道，如果生病必须实现监听器或不

Home.html中

<ion-card-content (click)="play(sound)"> 
     <div class="wrapper"> 
     <ion-spinner class="color-green" name="bubble"></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

您需要添加一个*ngIf给你的微调器

<ion-spinner class="color-green" name="bubble" *ngIf="showSpinner"></ion-spinner> 

则是.ts文件

showSpinner:boolean; 
... 
// On the click action set to true 
this.showSpinner = true; 
// When the http returns with the audio file set to false 
this.showSpinner = false;