イオンがスピンして音楽が読み込まれるのを待つ（イオン2 /アンガー2）

Question

私の音楽アプリでは、httpリクエストを行い、サーバーから.mp3ファイルを再生する「クリック」機能があります。私の問題は、アプリケーションがサーバーからオーディオを読み込むために、しばらく時間がかかり、それがなぜイオンスピナーを追加したのかということです。私は、音楽がロードされているときに、イオンスピナーが表示されているようにしています。ローディングが完了すると、スピナーが隠されています。病気リスナーか

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;