Этот массив не определен, но почему?

Question

Я хочу проверить массив до его заполнения и показать диалоговое окно загрузки, но оно всегда сообщает мне

this.events [0] не определено

ngOnInit() {
  this.initMethod();
  if(this.events[0].start == this.books[0].date_from_og) {
    this.dialog.closeAll();
  } 
}

Но события не могут быть неопределенными, поскольку они содержат событие календаря, который отображается.

  initMethod() {
    this.service
     .getEmployees()
     .subscribe(
     (listBooks) => {
       this.books = listBooks;
       this.events = this.books.map((book) => {
         return {
           start: new Date(book.date_from_og),
           end: new Date(book.date_to_og),
           type: ""+book.type,
           title: "" + book.device + "",
           color: colors.blue,
           actions: this.actions,
           resizable: {
             beforeStart: false,
             afterEnd: false
           },
           draggable: false
         }
       });
     },
     (err) => console.log(err)
   );
  }
}

И конструктор:

constructor(private modal: NgbModal, private service: BookingService, private dialog: MatDialog) {
   this.initMethod();

   this.dialog.open(DialogLaedt, {
      width: '650px'
   });

Answer 1

Я заметил, что вы вызываете initMethod () дважды.Один раз в конструкторе и один раз в методе ngOninit .

Answer 2

Ваша проблема в том, что вы initMethod() извлекаете результат асинхронно.

Поэтому, когда вы достигаете строки с if(this.events[0].start == ..., нет никакой гарантии, что данные о событии были получены из службы.

Исправление состоит в том, чтобы переместить ваш чек в часть подписки вашего метода init (который выполняется, как только наблюдаемое излучает свое значение), или позволить методу init вернуть наблюдаемое, на которое вы можете подписаться, и выполнить вашу проверкувнутри этой подписки.

Решение 1 - Перемещение чека в подписку

ngOnInit() {
  this.initMethod();
}

initMethod() {
  this.service
   .getEmployees()
   .subscribe(
   (listBooks) => {
     this.books = listBooks;
     this.events = this.books.map((book) => {
       return {
         start: new Date(book.date_from_og),
         end: new Date(book.date_to_og),
         type: ""+book.type,
         title: "" + book.device + "",
         color: colors.blue,
         actions: this.actions,
         resizable: {
           beforeStart: false,
           afterEnd: false
         },
         draggable: false
       }

       if(this.events[0].start == this.books[0].date_from_og) {
         this.dialog.closeAll();
       } 
     });
   },
   (err) => console.log(err)
 );
}

Решение 2 - Разрешение initMethod вернуть Observable

ngOnInit() {
  this.initMethod().subscribe(() => {
      if(this.events[0].start == this.books[0].date_from_og) {
          this.dialog.closeAll();
      } 
  });
}


initMethod() {
    return this.service
    .getEmployees()
    .pipe(tap(
    (listBooks) => {
        this.books = listBooks;
        this.events = this.books.map((book) => {
        return {
            start: new Date(book.date_from_og),
            end: new Date(book.date_to_og),
            type: ""+book.type,
            title: "" + book.device + "",
            color: colors.blue,
            actions: this.actions,
            resizable: {
            beforeStart: false,
            afterEnd: false
            },
            draggable: false
        }
        });
    }))
}