Cannot read property 'title' of undefined in angular2

Question

My component

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

 }

}

my html

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

So when I load the page, it shows the content of movie.tittle, but there is also an error in console saying "Cannot read property 'title' of undefined"

Any ideas?

@kirk jonrsharpe these aren't really the best option here. See my answer. — Derek Brown, Oct 12 '17 at 20:43
https://stackoverflow.com/questions/34833358/angular-2-typeerror-l-thing0-is-undefined-in-thing-title-in-appcomponent dup — Jota.Toledo, Oct 12 '17 at 22:40

Derek Brown · Accepted Answer · 2017-10-12T20:44:39.633

The subscribe() function is asynchronous, meaning the code inside of the callback (including this.movie = movie) can be executed after the completion of the ngOnInit() method.

As @kirk and @jonrsharpe pointed out in the comments, you could add a test before the value inside of the template. But this is not the most elegant solution.

I would suggest instead reading up on Observables, and in particular, the async pipe. This makes your code a lot simpler:

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

and then your HTML would look like:

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

Note the ?- this checks that the title property actually exists, so that an error doesn't occur if the object is invalid. You should also add a template block somewhere else which handles cases of errors.

@Kirk - sorry, I realized I made that mistake. Updated. – Derek Brown Oct 12 '17 at 20:45 — Derek Brown, Oct 12 '17 at 20:45

Cannot read property 'title' of undefined in angular2

1 Answers1

Linked

Related