Angular TypeEror: объект (_co.book) равен нулю?

Question

Вот что показывает консоль:

ОШИБКА TypeError: "_co.book is null" View_SingleBookComponent_0 SingleBookComponent.html: 3 Угловой 24 RxJS 5 Angular 11 SingleBookComponent.html: 3: 4 ОШИБКА КОНТЕКСТА {…} elDef: Object {nodeIndex: 2, bindingIndex: 0, outputIndex: 0,…} elView: Object {def: {…}, родитель: {…}, состояние: 1164,…} nodeDef: Объект {nodeIndex: 3, bindingIndex: 0, outputIndex: 0,…} nodeIndex: 3 view: Object {def: {…}, родитель: {…}, состояние: 1164,… } ...

На странице должна отображаться информация о книге (имя автора и название книги)

Это код single-book.component.ts:

export class SingleBookComponent implements OnInit {

  book: Book;

  constructor(private route: ActivatedRoute, private booksService: BooksService,
              private router: Router) {}

  ngOnInit() {
    this.book = new Book('', '');
    const id = this.route.snapshot.params[' id'];
    this.booksService.getSingleBook(+id).then(
      (book: Book) => {
        this.book = book;
      }
    );
  }

  onBack() {
    this.router.navigate(['/books']);
  }
}

 //This is the book-form.component.ts code

export class BookFormComponent implements OnInit {
  bookForm: FormGroup;
  fileIsUploding = false;
  fileURL: string;
  fileUploaded = false;

  constructor(private formBuilder: FormBuilder,
              private booksService: BooksService,
              private router: Router) { }

  ngOnInit() {
    this.initForm();

  }
  initForm() {
    this.bookForm = this.formBuilder.group({
      title: ['', Validators.required],
      author: ['', Validators.required]
    });
  }
  onSaveBook() {
    const title = this.bookForm.get('title').value;
    const author = this.bookForm.get('author').value;
    const newBook = new Book (title, author);
    if (this.fileURL && this.fileURL !== '' ) {
      newBook.photo = this.fileURL;
    }
    this.booksService.createNewBook(newBook);
    this.router.navigate(['/book']);
  }

Answer 1

Во время рендеринга компонента book не установлено.Просто переместите this.book = new Book('', ''); в конструктор или непосредственно в объявление переменной над вашим конструктором.

В качестве альтернативы, оберните код вашего компонента в *ngIf, например:

<ng-container *ngIf="book">
   <div ...></div>
</ng-container>

Answer 2

const id = this.route.snapshot.params[' id'];

Перед элементом id есть пробел, из-за которого id становится нулевым.должно быть:

const id = this.route.snapshot.params['id'];

или

const id = this.route.snapshot.params.id;

Answer 3

добавьте оператор elvis - ? внутри html, где вы используете book, например:

*ngIf="book?.photo"

, или вы также можете добавить *ngIf="book" к div элементу, который упаковывает данные вашей книги