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

时间:2019-05-24 06:56:51

标签: angular constructor

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

点击前:enter image description here

及之后:enter image description here

(蓝点是事件数组的事件)

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

  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进行了尝试,该对话框会一直显示到加载数据为止,但效果不佳。

1 个答案:

答案 0 :(得分:0)

这取决于您用于日历的库,但是可能在角度区域之外发生了某些事情,或者您的更改检测策略已设置为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