ionic-framework - Ionic：使用 *ngIf 时图标不会切换回来

Question

所以我在 Ionic 中有以下按钮：

HTML

<button ion-button (click)="play()">
   <ion-icon *ngIf="!isPlaying" name="play"></ion-icon>
   <ion-icon *ngIf="isPlaying" name="stop"></ion-icon>
</button>

零件

play() {
  this.isPlaying = true;
  this.nativeAudio.play('audioId', () => {
    this.isPlaying = false;
  });
}

现在，当我单击按钮时，图标切换到停止，表示播放已开始。但是，即使我将 设置isPlaying为 false 播放后，按钮仍会显示stop图标。

现在在我看来有不同的按钮，我注意到当我按下其他按钮之一时，图标现在切换到play图标。在 UI 上有另一个活动之前，UI 似乎不会刷新。当我尝试使用 切换显示的图像时也会发生这种情况*ngIf。

提前致谢！

标签： ionic-frameworkionic3

Answer 1

像这样试试。

play(){
   this.isPlaying = ! this.isPLaying;
}

在你的html文件中

<button ion-button (click)="play()">
   <ion-icon [name]="!isPlaying? 'play':'stop'"></ion-icon>
</button>

希望这可以帮助。