离子：使用* 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>

希望这会有所帮助。