无法读取未定义角度6的属性“图像”

Question

当尝试获取详细信息时，它会呈现给dom，但会给出未定义的错误。 这是要显示的图像

这是图书详细信息组件

export class BookDetailsComponent implements OnInit {
  book: Book;
  books: Book[];
  id: string;

  constructor(private route: ActivatedRoute, private booksService: BooksService, private http: Http) { }

  async getAsyncData() {
    this.books = await this.http.get('/assets/books.json').toPromise().then(
      data => this.books = data.json().books
    );
    this.book = this.books.filter(book => book.id === this.id)[0];
  }

  ngOnInit() {
    this.route.params.subscribe(
      (params: Params) => {
        this.id = params['id'];
        if (this.book) {
          this.book = this.booksService.getBook(this.id);
        } else {
          this.getAsyncData();
        }
      }
    );
  }

}

这是服务中的getBook函数

getBook(id: string) {
    return this.books.filter(book => book.id === id)[0];
  }

Answer 1

此问题通常是因为您使用诸如

<img src="{{ book.image }}" />

在您的代码中。首次渲染组件时，您的book对象仍未定义（请参见book: Book;：此处没有值定义）。

一种解决方案是将要引用的书包装在*ngIf版本中：

<ng-container *ngIf="book">
    <img src="{{ book.image }}" />
</ng-container>

或者，如果只是单个图像，请执行

<img src="{{ book.image }}" *ngIf="book" />

或者，如果您不介意img在您的DOM中使用空src：

<img src="{{ book?.image }}" />

Answer 2

当您刷新页面时，它最初会调用ngOninit方法。

最初，如果条件变为假，并选择其他...

这里调用getAsyncData（）...

this.book = this.books.filter（book => book.id === this.id）[0];

此过滤器book.id中为空，因此会引发未定义的错误。