angular - 为什么我必须在数据加载之前点击？

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

  }

我已经用一个对话框试过了，它会一直显示，直到数据被加载，但这并不奏效。

标签： angularconstructor

Answer 1

这取决于您用于日历的库，但可能发生在角度区域之外，或者您的更改检测策略设置为OnPush. 所以你需要告诉 Angular 有些东西已经改变了，它需要刷新视图。为此，您可以使用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