Как объявить ссылочную переменную в Angular

Я создал компонент edit-book.component.ts, в котором описана ссылочная переменная:

book: BookModel | undefined;

инициализируется она в этом методе:

ngOnInit(): void {
  this.book= this.data[0];
  ...

Вот файл описание объекта book:

export class BookModel {
  id: string;
  bookName: string;

  constructor(id: string, bookName: string) {
    this.id = id;
    this.bookName= bookName;
  }
}

Когда я прописываю в файле edit-book.component.html

[(ngModel)]="book.bookName"

то компилятор ругается:

error TS2532: Object is possibly 'undefined'.

Как правильно указать тип переменной book? Если пишу так, то компилятор требует выполнить инициализацию или указать undefined:

book: BookModel;

Ответы (1 шт):

Автор решения: Komdosh

Проблема в том, что ngOnInit отрабатывает после инициализации компонента, а значит и

[(ngModel)]="book.bookName"

На этапе инициализации будет

[(ngModel)]="undefined.bookName"

Данную проблему можно обойти временной инициализацией переменной

book: BookModel = new BookModel();

В таком случае, как только ваша data придёт, ссылка на объект поменяется в вашем onInit методе

→ Ссылка