Angular 角度6字符串插值未使用内部值更新。subscribe（）

我有一个组件，显示特定视频的标题和艺术家。当我在服务中调用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);
    });
  }
}

---

任何建议都将不胜感激。我见过一些人使用ngZone，但我听说这可能不是最好的方法，老实说，这感觉有点不舒服。

这可能会有帮助：

@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);
    });
  }
}

@组件({
选择器：“ntv正在播放”，
templateUrl:'./正在播放.component.html'，
样式URL:['./正在播放.component.css']
})
导出类NowPlayingComponent实现OnInit{
正在播放：可观察；
视频：视频；
建造师(
私人视频服务：视频播放器服务，
专用changeDetector:ChangeDetectorRef
) { }
恩戈尼尼特（）{
this.nowPlaying=this.videoService.getNowPlaying（）；
log（'nowPlayingComponent'）；
此.nowPlaying.subscribe（v=>{
这个视频=v；
this.changeDetector.detectChanges（）；
log（'nowPlaying:'，this.video）；
});
}
}

我觉得一切都很好。您可以尝试的一件事是，在具有类视频信息的父div中尝试附加*ngIf=“video”，我知道您有？这是一个替代品，但您仍然可以尝试一下，然后在父div中创建另一个div，该div将视频显示为json{{video|json}

NgZone.isInAngularZone（）

应该会给您答案谢谢@Maksym。这把它修好了。我现在正在阅读ChangeDetectorRef文档。我一直认为Angular会自动完成这项工作。如果数据是异步的，我想不会。对不起，我仍然无法投票。需要再重复几次。@NoelR。我还注意到一件事——在您的服务中，您的

nowPlayingChanged

是一个主题，但在

getNowPlaying

中，您只是返回它。尝试

返回此.nowPlayingChanged.asObservable（）

，首先，这不允许您在服务之外执行

。下一步（）

，因此您的组件将始终与服务数据同步，+当它转换为组件的可观察时，它可能有助于检测原始主题内部的更改。只是一个猜测，但仍然可能有帮助我记得我曾经尝试过这个选项，但仍然没有检测到变化。我可以再试一次，以防我第一次尝试时错过了什么。谢谢你的跟进。

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

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 

@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);
    });
  }
}