イオンスピナー、音楽のロード待ち中

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 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

コンストラクタ

で

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