在等待音樂加載時使用離子旋轉器（ionic 2 / angular 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;