Angular Ionic项目中ionic2-calendar首月不显示事件问题求助

问题根因 #

ionic2-calendar 组件默认仅监听 eventSource 绑定数组的引用变化，你通过 push 方法向已有 allEvents 数组添加元素时，数组的内存引用没有发生改变，组件不会触发事件重渲染逻辑。切换月份时组件会主动拉取最新的事件源数据，因此切回当前月后能正常显示事件。

修复方案 #

任选以下其中一种方法修改即可：

方案一：手动触发日历重绘（推荐，兼容性更好） #

修改 addEvent 方法，添加完事件后调用组件自带的 loadEvents 方法主动触发重绘，同时先清空旧数组避免事件重复累加：

addEvent() {
  // 清空原有事件，防止多次调用时重复加载
  this.allEvents = [];
  this.events.forEach(event => {
    this.allEvents.push({
      title: event.nom,
      startTime:  new Date(event.date_start),
      endTime: new Date(event.date_end),        
    });
  })
  // 手动触发日历重新加载事件，加可选链避免实例未初始化时报错
  this.myCalendar?.loadEvents();
}

方案二：替换数组引用触发变更检测 #

不修改原有数组，直接生成新数组赋值给 allEvents，触发Angular自带的变更检测让组件自动更新：

addEvent() {
  // map方法返回新数组，直接替换原数组引用触发更新
  this.allEvents = this.events.map(event => ({
    title: event.nom,
    startTime: new Date(event.date_start),
    endTime: new Date(event.date_end)
  }))
}

内容的提问来源于stack exchange，提问作者EdMkn