Question

我的组件

export class MoviedetailComponent implements OnInit {
 movie:any

 constructor(
  private getmovie: GetmovieService,
  private router: Router,
  private rout: ActivatedRoute
 ) { }

 ngOnInit() {
   this.rout.params
   .switchMap((params: Params) => 
   this.getmovie.getMovieById(+params['id']))
   .subscribe(movie => {
    this.movie = movie;
    console.log(this.movie);
 });

 }

}

我的HTML

<p>{{movie.title}}</p>

因此，当我加载页面时，它显示了movie.tittle的内容，但是控制台中也有一个错误说“＃34;无法读取属性＆＃39;标题＆＃39;未定义＆＃34;

有什么想法吗？

Answer 1

subscribe()函数是异步的，这意味着回调内部的代码（包括this.movie = movie）可以在ngOnInit()方法完成后执行。

正如@kirk和@jonrsharpe在评论中指出的那样，您可以在模板内部的值之前添加测试。但这不是最优雅的解决方案。

我建议改为阅读Observables，特别是the async pipe。这使您的代码更简单：

this.movie = this.route.params
  .switchMap((params: Params) => 
      this.getmovie.getMovieById(+params['id']))

然后你的HTML看起来像：

<p>{{ (movie | async)?.title }}</a>

注意? - 这会检查title属性是否确实存在，以便在对象无效时不会发生错误。您还应该在其他地方添加模板块来处理错误。

无法阅读财产标题＆＃39;在angular2中未定义的

1 个答案: