Ionic 2 日历事件源属性绑定不更新视图

Question

我是Ionic/angular/ts的新手，我正在尝试创建一个具有设置约会(事件(并编辑/删除的日历。我正在使用模态编辑所选事件，并且该模式具有删除事件按钮。现在，我将添加的事件存储在提供商中的对象数组中。添加，编辑删除函数以及获取所有事件功能，都在此提供商中。如下所示，

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
/*
  Generated class for the AppointmentServiceProvider provider.
  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class AppointmentServiceProvider {
  currentId: number;
  events: { id: number, title: string, startTime: string,endTime: string, allDay:boolean }[];
  constructor(public http: HttpClient) {
    this.currentId = 0;
    this.events =[];
  }
  getCurrentId(): number{
    console.log("in get curr");
    if(this.events == null){
      console.log("in curr null");
      return 0;
    }else{
      console.log("in curr not null");
      if(this.events.length == 0){
        return 0;
      }else{
        return this.events.slice().sort((a, b) => a.id-b.id)[this.events.length-1].id;
      }
    }
  }
  addEvent(event: { id: number, title: string, startTime: string, endTime: string, allDay:boolean }){
    //let eventLength = this.events.length; 
  let pos = this.events.map(function(e) { return e.id; }).indexOf(event.id);
    if(pos == -1){
      this.events.push(event);
    }else{
      this.events[pos] = event;
    }
    //console.log(event);
    //console.log(this.events.length);
  }
deleteEvent(eventId:number){
  let pos = this.events.map(function(e) { return e.id; }).indexOf(eventId);
  this.events.splice(pos,1);
}
  getAllEvents():{ id: number, title: string, startTime: string,endTime: string, allDay:boolean }[]{
  console.log("in get all" + this.events.length);
  return this.events;
  }
}

当我单击删除时，该项目将从提供商的数组中删除(从控制台日志中可以明显看出(。但是，我的观点仍然显示已删除的事件。这是我带有日历的页面视图，

 <calendar [eventSource]="eventSource"
  [calendarMode]="calendar.mode"
  [currentDate]="calendar.currentDate"
  (onEventSelected)="onEventSelected($event)"
  (onTitleChanged)="onViewTitleChanged($event)"
  (onTimeSelected)="onTimeSelected($event)"
  step="30"
  class="calendar">
</calendar>

ts支持这是

export class AppointmentPage {
  eventSource:{ id: number, title: string, startTime: string,endTime: string, allDay:boolean }[] = [];
  viewTitle: string;
  selectedDay = new Date();
  calendar = {
    mode: 'month',
    currentDate: new Date()
  };
  constructor(public navCtrl: NavController, private modalCtrl: ModalController, private alertCtrl: AlertController, public eventService: AppointmentServiceProvider) { 
    this.eventSource = eventService.getAllEvents();
  }
 editEvent(selectedEvent){
   console.log(selectedEvent);
  let modal = this.modalCtrl.create('EventModalPage', {eventTitle: selectedEvent.title, 
                                                          eventId: selectedEvent.id, 
                                                          eventStartTime:selectedEvent.startTime, 
                                                          eventEndTime: selectedEvent.endTime,
                                                          eventAllDay: selectedEvent.allDay,
                                                          type:1});
  modal.present();
  modal.onDidDismiss(data => {
    console.log("after delete outside data block.");
    this.eventSource = [];
    this.eventSource = this.eventService.getAllEvents();
    console.log(this.eventSource);
    this.eventSource = this.eventService.getAllEvents();
    // if(data == null){
    //   this.eventSource = [];
    //   this.eventSource = this.eventService.getAllEvents();
    //   // *** Check this, wont refresh after delete
    // }
    if (data) {
      console.log("after delete in the data block. Data:" +data);
      let eventData = data;
      //eventData.id= this.eventService.getCurrentId()+1;
      eventData.id = data.id;
      eventData.title = data.title;
      eventData.allDay = data.allDay;
      eventData.startTime = new Date(data.startTime);
      eventData.endTime = new Date(data.endTime);
      //let events = this.eventSource;
      this.eventService.addEvent(eventData);
      //events.push(eventData);
      this.eventSource = [];
      // this.eventSource = this.eventService.getAllEvents();
      setTimeout(() => {
        this.eventSource = this.eventService.getAllEvents();
      });
    }
  });
 }
 }

在模态中，删除按钮调用该函数，

delete(){
    let confirm = this.alertCtrl.create({
      title: "Please confirm",
      message: "Are you sure you want to delete this appointment?",
      enableBackdropDismiss: false ,
      buttons: [
          {
            text: 'Yes',
             handler: data => {
                   this.eventService.deleteEvent(this.event.id);
                  // this.eventService.getAllEvents();
                   this.viewCtrl.dismiss(null);
            }
          },
          {
            text: 'No',
           handler: data => {
            }
          }
        ]
  });
  confirm.present();
  }

为什么不刷新Eventsource？

Answer 1

最终能够解决它。Ionic2-Calendar Github有一个事件可以强行加载事件，如果事件是手动更改的，则有必要。添加了以下内容以在TS文件中引用日历，并在其上称为loadevents函数以刷新视图。

import { ViewChild } from '@angular/core';
export class AppointmentPage {
  @ViewChild(CalendarComponent) myCalendar:CalendarComponent;
 editEvent(selectedEvent){
   console.log(selectedEvent);
  let modal = this.modalCtrl.create('EventModalPage', {eventTitle: selectedEvent.title, 
                                                          eventId: selectedEvent.id, 
                                                          eventStartTime:selectedEvent.startTime, 
                                                          eventEndTime: selectedEvent.endTime,
                                                          eventAllDay: selectedEvent.allDay,
                                                          type:1});
  modal.present();
  modal.onDidDismiss(data => {
    console.log("after delete outside data block.");
    this.eventSource = [];
    this.eventSource = this.eventService.getAllEvents();

    this.eventSource = this.eventService.getAllEvents();
    this.myCalendar.loadEvents();   // <== added this after updating eventSource
    if (data) {
      console.log("after delete in the data block. Data:" +data);
      let eventData = data;
      //eventData.id= this.eventService.getCurrentId()+1;
      eventData.id = data.id;
      eventData.title = data.title;
      eventData.allDay = data.allDay;
      eventData.startTime = new Date(data.startTime);
      eventData.endTime = new Date(data.endTime);
      //let events = this.eventSource;
      this.eventService.addEvent(eventData);
      //events.push(eventData);
      this.eventSource = [];
      // this.eventSource = this.eventService.getAllEvents();
      setTimeout(() => {
        this.eventSource = this.eventService.getAllEvents();
      });
    }
  });
 }
}

解决了问题。现在，删除的事件立即被删除。

Answer 2

要更新视图，您将将您的 Eventsource-array 设置为空数组。

this.eventSource = [];

然后您将使用新事件更新您的Eventsource。

(即(

this.eventSource = this.updateEvents();

这对我有用

离子版本：5.4.16

ionic2calendar版本：0.6.9