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.Похоже, что пользовательский интерфейс не обновляется до тех пор, пока в нем не появится другое действие.Это также происходит, когда я пытаюсь переключить отображаемые изображения, используя *ngIf.

Заранее спасибо!

Answer 1

Попробуйте вот так.

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

в вашем html файле

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

Надеюсь, это поможет.