Angular 6 String Interpolation не обновляется со значением внутри .subscribe ()

Question

У меня есть компонент, который отображает название и исполнителя конкретного видео.Когда я вызываю playNext () в моем сервисе, он должен обновить заголовок и исполнителя новыми данными.Я делаю console.log и могу убедиться, что подписка работает.Я получаю обновленное значение каждый раз, когда вызывается playNext (), однако значение в шаблоне не обновляется.Он отображается правильно только в первый раз.Я что-то упустил?

Вот мой код компонента

@Component({
  selector: 'ntv-now-playing',
  templateUrl: './now-playing.component.html',
  styleUrls: ['./now-playing.component.css']
})
export class NowPlayingComponent implements OnInit {
  nowPlaying: Observable<Video>;
  video: Video;
  constructor(private videoService: VideoPlayerService) { }

  ngOnInit() {
    this.nowPlaying = this.videoService.getNowPlaying();
    console.log('nowPlayingComponent');
    this.nowPlaying.subscribe(v => {
      this.video = v;
      console.log('nowPlaying:', this.video);
    });
  }
}

В моем сервисе я делаю это: я удалил часть рабочего кода для краткости.

@Injectable()
export class VideoPlayerService {
  ...
  nowPlayingChanged = new Subject<Video>();
  ...
  private nowPlaying: Video;

  constructor(private db: AngularFirestore) {}
  ...

  getNowPlaying(): Observable<Video> {
    return this.nowPlayingChanged;
  }

  playNext(vIdx: number, lastIdx: number) {
    console.log('playNext()');
    this.nowPlaying = this.videos[vIdx];
    console.log(this.nowPlaying);
    this.nowPlayingChanged.next(this.nowPlaying);

  }
}

Мой шаблон имеет следующее:

<div class="video-info">
  <h5>{{video?.title}} - {{video?.artist}}</h5>
  <div>Channel Info&nbsp;&nbsp;<button class="btn btn-secondary">+ Subscribe</button></div>
</div>

Журнал консоли внутри функции подписки компонента показывает, что каждый раз вызывается playNext (), поэтому я знаю, что он меняется правильно, это только пользовательский интерфейсне обновляется.

nowPlaying: {artist: "Alan Walker", duration: "3:32", startTime: Timestamp, thumbnailPath: "https://i.ytimg.com/vi/60ItHLz5WEA/hqdefault.jpg", title: "Faded", …}
nowPlaying: {artist: "Deadmau5", duration: "3:37", thumbnailPath: "https://i.ytimg.com/vi/UG3sfZKtCQI/hqdefault.jpg", title: "Monophobia", videoId: "UG3sfZKtCQI"}
nowPlaying: {artist: "Steve Aoki", duration: "59:55", thumbnailPath: "https://i.ytimg.com/vi/sR3w1P2nPH8/hqdefault.jpg", title: "Tomorrowland", videoId: "x9ZkC3OgI78"}
video-player.component.ts:69 

Любой совет приветствуется.Я видел, как некоторые люди используют ngZone, но я слышал, что это может быть не лучшим подходом, и, честно говоря, это звучит как хакерство.

Answer 1

Вероятно, это может помочь:

@Component({
  selector: 'ntv-now-playing',
  templateUrl: './now-playing.component.html',
  styleUrls: ['./now-playing.component.css']
})
export class NowPlayingComponent implements OnInit {
  nowPlaying: Observable<Video>;
  video: Video;
  constructor(
    private videoService: VideoPlayerService,
    private changeDetector: ChangeDetectorRef
   ) { }

  ngOnInit() {
    this.nowPlaying = this.videoService.getNowPlaying();
    console.log('nowPlayingComponent');
    this.nowPlaying.subscribe(v => {
      this.video = v;
      this.changeDetector.detectChanges();
      console.log('nowPlaying:', this.video);
    });
  }
}