等待音乐加载时的离子旋转器（离子 2/角度 2）答案

【问题标题】：ion-spinner while waiting for music to load (ionic 2/angular 2)等待音乐加载时的离子旋转器（离子 2/角度 2）
【发布时间】：2017-09-12 15:13:26
【问题描述】：

在我的音乐应用程序中，我有一个“点击”功能，它发出一个 http 请求并从服务器播放 .mp3 文件。我的问题是，有时应用程序需要一段时间才能从服务器加载音频，这就是我添加 ion-spinner 的原因。我正在努力做到这一点，当音乐在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();
 }

【问题讨论】：

为什么不用*ngIf来切换呢？

标签： javascript android angular typescript ionic2

【解决方案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;

【讨论】：