Просмотр не обновляется при изменении значения - PullRequest
Новая
       21

Просмотр не обновляется при изменении значения

0 голосов
/ 09 февраля 2020

У меня есть кнопка в компоненте Ioni c, который я хочу показывать только при воспроизведении звука.

<button *ngIf="playing">Stop Audio</button>

У меня есть служба, которая предоставляет доступ c свойство true, когда воспроизводится звук, и false, если это не так.

public playing = new BehaviorSubject<boolean>(false)

Когда я воспроизводю звук, кнопка отображается правильно, но когда звук перестает воспроизводиться, кнопка остается, пока я не нажму другую кнопку, чтобы изменить состояние просмотра.

Я знаю, что BehaviorSubject работает должным образом, потому что, когда я подписываюсь на него и консоль регистрирует вывод, он регистрирует true, когда воспроизводится звук (и представление обновляется) и false, когда звук останавливается (и представление не обновляется).

Ответы [ 2 ]

0 голосов
/ 09 февраля 2020

Итак, есть два способа сделать это sh в вашем компоненте. Одним из них является добавление свойства к компоненту и извлечение значения в него. Итак, вы делаете что-то вроде этого:

Класс компонента 

export class MyComponent implements OnInit {
  playing: boolean = false;

  constructor(private audioService: AudioService) {}

  ngOnInit(): void {
    this.audioService.playing.subscribe(playing => this.playing = playing);
  }

}

Шаблон компонента 

<button *ngIf="playing">Stop Audio</button>

Другое решение использовать asyn c pipe, как предложил Ploppy. Тогда вы можете сделать следующее:

Класс компонента 

export class MyComponent implements OnInit {
  playing: Observable<boolean>;

  constructor(private audioService: AudioService) {}

  ngOnInit(): void {
    this.playing = this.audioService.playing;
  }

}

Шаблон компонента 

<button *ngIf="(playing | async)">Stop Audio</button>
0 голосов
/ 09 февраля 2020

Вам нужно использовать асин c трубу: *ngif="audioPlayingService.playing | async"

...