等待音乐加载时的离子旋转器

Question

在我的音乐应用程序中，我有一个"点击"功能，可以发出http请求并从服务器播放.mp3文件。我的问题是，有时应用程序需要一段时间才能从服务器获取音频，这就是我添加离子旋转器的原因。我希望微调器仅在音频加载时显示，然后消失。

首页.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>

首页

/* 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
 ......
 }