Angular 4 CI TypeError: Cannot read property 'x' of undefined

Question

i want to show the data to the form and

i have this error:

TypeError: Cannot read property 'title' of undefined

heres my component :

  book:Book;
  getBook(){
    var id = this.route.snapshot.params['id'];
    this.bookService.getBook(id)
    .subscribe(book=>{
     this.book = book;
    })
  }

and this is my view

<div class="card col-md-5">
<div class="card-body">
    <form>
        <div class="form-group row">
          <label for="Title" class="col-sm-2 col-form-label">Title</label>
          <div class="col-sm-10">
            <p  class="form-control" disabled name="title" >{{book.title}}</p>
          </div>
        </div>
        <div class="form-group row">
          <label for="Author" class="col-sm-2 col-form-label">Author</label>
          <div class="col-sm-10">
            <p  class="form-control"  name="title">{{book.author}}</p>
          </div>
        </div>
        <div class="form-group row">
            <label for="Author" class="col-sm-2 col-form-label">ISBN</label>
            <div class="col-sm-10">
              <p  class="form-control" disabled name="title" >{{book.isbn}}</p>
            </div>
          </div>
        <div class="form-group row">
            <div class="col-sm-6">
              <!-- <button type="submit" class="btn btn-primary">SAVE</button> -->
              <button type="submit" class="btn btn-success" [routerLink] ="['/book']" >CANCEL</button>                
            </div>

        </div>
      </form>
</div>

is there anything wrong on my view or just on my component

I'd guess that the book you're looking for hasn't been found, hence you getting an error when you try to examine its properties. — GrandMasterFlush, Oct 26 '17 at 15:47

score -1 · Answer 1 · answered Oct 26 '17 at 16:43

-1

You have to set a default value for this 'book' property

book:Book = new Book();

or use ngIf to ensure the 'book' exists

<div class="card-body" *ngIf="book">

answered Oct 26 '17 at 16:43

Christian Benseler

7,907
8
40
71

why did you added an answer to a question that you marked yourself as dup? – Jota.Toledo Oct 26 '17 at 17:50
Because I remember later that I have answered a similar question. Anyway, I don't think this current answer should be marked as "not useful" as long as it is right, even if duplicated. – Christian Benseler Oct 26 '17 at 18:03
https://meta.stackexchange.com/a/10844 ;) – AT82 Oct 28 '17 at 09:56

Angular 4 CI TypeError: Cannot read property 'x' of undefined

1 Answers1