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 切换显示的图像时也会发生这种情况。

提前致谢！

Answer 1

像这样试试。

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

在您的html 文件中

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

希望这会有所帮助。