Angular 角度4绑定图像无法读取未定义的属性

我有一个Angular 4.0组件，它的相对HTML带有一个NgFor cicle，它为从使用django rest框架开发的api检索到的每个book对象创建一个card元素

BROWSER.HTML

我想访问每个图书对象的详细信息页面。在我的细节部分中，我有：

BookDetailComponent.ts

我的图书服务是：

BOOKSERVICE.TS

还有这个

Error: Uncaught (in promise): TypeError: Cannot read property 'img_url' of undefined
TypeError: Cannot read property 'img_url' of undefined

每次我访问该页面时，会有3-4次不同的时间。总共有11个错误，有时有19个

但我的目标是正确接收的，我有

XHR finished loading: GET "http://localhost:8000/api/books/9788808122810/".

及

这张照片实际上出现在我的页面上。我只是想知道为什么所有这些错误

我的图书课，只是为了确保你有所有的信息

export class Book {
  isbn: number;
  book_title: string;
  pub_date: string;
  img_url: string;
}

---

问题在于，当呈现组件BookDetailComponent时，book属性为null，因为route:ActivatedRoute服务的subscribe方法是异步的，可以了解rxjs的可观察对象，但不会返回。您需要使用异步管道或使用*ngIf或？如果BookDetailComponent.html中的book属性不为null，则为运算符

角度异步管道参考：

---

可观察参考：

只需添加一个？下面是这本书的内容。它使对象成为可选对象，如果在渲染时对象不可用，则不会给出错误

<div *ngFor="let book of books" class="col s12 m2">
  <div class="card">
    <div class="card-image">
      <img  src="{{book?.img_url}}" >  <!--Check this line-->
    </div>
    <div class="card-content">
      <span class="card-title">{{book.book_title}}</span>
      <p>ISBN: {{book.isbn}}</p>
    </div>
    <div class="card-action">
      <a  [routerLink]="['/detail', book.isbn]">This is a link</a>
    </div>
  </div>
</div>

---

哇，我只是添加了*ngIf=book=img标记内src属性之前为null，并且。。。控制台中不再出现错误：D谢谢

<div class="container">
  <div class="row center"">
    <div class="card white col s8 offset-s2 text-cyan">
      <div class="row">
        <div class="col s3"><img src="{{book.img_url}}"></div>
        <div class="col s9"></div>
      </div>
    </div>
  </div>
</div>

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}

Error: Uncaught (in promise): TypeError: Cannot read property 'img_url' of undefined
TypeError: Cannot read property 'img_url' of undefined

XHR finished loading: GET "http://localhost:8000/api/books/9788808122810/".

Object {isbn: "9788808122810", book_title: "My Title", pub_date: "2017-06-16T17:57:31Z", img_url: "https://img.ibs.it/images/someimage.png"}

export class Book {
  isbn: number;
  book_title: string;
  pub_date: string;
  img_url: string;
}

<div *ngFor="let book of books" class="col s12 m2">
  <div class="card">
    <div class="card-image">
      <img  src="{{book?.img_url}}" >  <!--Check this line-->
    </div>
    <div class="card-content">
      <span class="card-title">{{book.book_title}}</span>
      <p>ISBN: {{book.isbn}}</p>
    </div>
    <div class="card-action">
      <a  [routerLink]="['/detail', book.isbn]">This is a link</a>
    </div>
  </div>
</div>