Невозможно прочитать свойство 'изображение' с неопределенным углом 6

Question

При попытке получить подробности он отображает объект, но выдает неопределенную ошибку.Вот изображение для показа

Это компонент сведений о книге

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

Когда вы обновляете страницу, она первоначально вызывает метод ngOninit.

здесь изначально, если условие становится ложным, и выбирается другое ...

здесь она вызывает getAsyncData () ...

this.book = this.books.filter (book => book.id === this.id) [0];

в этом фильтре book.id пусто, поэтому выбрасываетнеопределенная ошибка.

Answer 2

Проблема обычно заключается в том, что в вашем коде используется строка типа

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

.Когда компонент визуализируется впервые, объект вашей книги по-прежнему не определен (см. book: Book;: здесь нет определения значения).

Одно из решений - заключить ссылки на книгу в блок *ngIf ed:

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

Или, в качестве альтернативы, если это просто одно изображение, выполните

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

Или, если вы не возражаете, img находится в вашей DOM с пустым src:

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