title: angular 4 binding images cannot read property of undefined
body: <p>I have an Angular 4.0 component, and its relative HTML with an NgFor cicle who creates a card element for each "book object" retrieved from my api (developed with django rest framework).</p>
  
  <p><strong>BROWSER.HTML</strong></p>
  
  <pre><code>&lt;div *ngFor="let book of books" class="col s12 m2"&gt;
        &lt;div class="card"&gt;
          &lt;div class="card-image"&gt;
            &lt;img  src="{{book.img_url}}" &gt;
          &lt;/div&gt;
          &lt;div class="card-content"&gt;
            &lt;span class="card-title"&gt;{{book.book_title}}&lt;/span&gt;
            &lt;p&gt;ISBN: {{book.isbn}}&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="card-action"&gt;
            &lt;a  [routerLink]="['/detail', book.isbn]"&gt;This is a link&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>my router's routes are</p>
  
  <p><strong>ROUTER.TS</strong></p>
  
  <pre><code>const routes: Routes = [
    { path: '', redirectTo: '/home', pathMatch: 'full' },
    { path: 'signup', component: SignupComponent },
    { path: 'home', component: HomeComponent },
    { path: 'books', component: BrowserComponent },
    { path: 'detail/:isbn', component: BookDetailComponent },
  ];
  </code></pre>
  
  <p>I'd like to access to a detail page for each book object. In my detail component i have:</p>
  
  <p><strong>BookDetailComponent.ts</strong></p>
  
  <pre><code>export class BookDetailComponent implements OnInit {
    book: Book;
    constructor(
      private bookService: BookService,
      private route: ActivatedRoute,
      private location: Location
    ) { }
  
    ngOnInit(): void {
      this.route.params
        .switchMap((params: Params) =&gt; this.bookService.getBook(+params['isbn']))
        .subscribe(book =&gt; this.book = book);
      console.log(this.book);
    }
  </code></pre>
  
  <p>my book service is:</p>
  
  <p><strong>BOOKSERVICE.TS</strong></p>
  
  <pre><code>@Injectable()
  export class BookService {
  
    private headers = new Headers({ 'Content-Type': 'application/json' });
    private booksUrl = 'http://localhost:8000/api/books/';
  
    getBook(isbn: number): Promise&lt;Book&gt; {
      const url = `${this.booksUrl}${isbn}/`;
      return this.http.get(url)
        .toPromise()
        .then(response =&gt; {
          console.log(response.json());
          return response.json() as Book;
        })
        .catch(this.handleError);
    }
  </code></pre>
  
  <p>when i use this html code in </p>
  
  <p><strong>BookDetailComponent.html</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row center""&gt;
      &lt;div class="card white col s8 offset-s2 text-cyan"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col s3"&gt;&lt;img src="{{book.img_url}}"&gt;&lt;/div&gt;
          &lt;div class="col s9"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have in the Chrome console:</p>
  
  <pre><code>ERROR TypeError: Cannot read property 'img_url' of undefined
      at Object.eval [as updateRenderer] (BookDetailComponent.html:7)
      at Object.debugUpdateRenderer [as updateRenderer] (core.es5.js:12822)
      at checkAndUpdateView (core.es5.js:12127)
      at callViewAction (core.es5.js:12485)
      at execComponentViewsAction (core.es5.js:12417)
      at checkAndUpdateView (core.es5.js:12128)
      at callViewAction (core.es5.js:12485)
      at execEmbeddedViewsAction (core.es5.js:12443)
      at checkAndUpdateView (core.es5.js:12123)
      at callViewAction (core.es5.js:12485)
  
  ERROR CONTEXT DebugContext_ {view: Object, nodeIndex: 12, nodeDef: Object, elDef: Object, elView: Object}
  </code></pre>
  
  <p>and this</p>
  
  <pre><code>Error: Uncaught (in promise): TypeError: Cannot read property 'img_url' of undefined
  TypeError: Cannot read property 'img_url' of undefined
  </code></pre>
  
  <p>3-4 different times every time i access that page. for a total of 11 errors sometime, sometime 19...</p>
  
  <p>But my object is correctly received, I have </p>
  
  <pre><code>XHR finished loading: GET "http://localhost:8000/api/books/9788808122810/".
  </code></pre>
  
  <p>and</p>
  
  <pre><code>Object {isbn: "9788808122810", book_title: "My Title", pub_date: "2017-06-16T17:57:31Z", img_url: "https://img.ibs.it/images/someimage.png"}
  </code></pre>
  
  <p>and the picture <strong>actually appears</strong> in my page. I just like to know why all these errors...</p>
  
  <p>my book class, just to be sure you have all the informations</p>
  
  <pre><code>export class Book {
    isbn: number;
    book_title: string;
    pub_date: string;
    img_url: string;
  }
  </code></pre>