为什么必须在加载数据之前单击？

Question

我的Kalender有问题。我想在其中加载一些事件，但是我总是必须先单击它。以下是一些示例：

点击前：

及之后：

（蓝点是事件数组的事件）

我的代码来填充事件数组：

  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
        }
        });
    }))
  }

我的ngOnInit：

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

  }

还有我的构造函数：

 constructor(private modal: NgbModal, private service: BookingService, private dialog: MatDialog) {

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

  }

我已经使用Dialog进行了尝试，该对话框会一直显示到加载数据为止，但效果不佳。

Answer 1

这取决于您用于日历的库，但是可能在角度区域之外发生了某些事情，或者您的更改检测策略已设置为OnPush。因此，您需要告诉Angle某些更改并且需要刷新视图。为此，您可以使用ChangeDetectorRef

constructor(private modal: NgbModal, private service: BookingService, 
         private dialog: MatDialog, private cdr: ChangeDetectorRef) {
//...


ngOnInit() {
    this.initMethod().subscribe(() => {
      //...
      this.cdr.detectChanges();//Tell angular that something has changed