angular - Ionic 2 日历事件源属性绑定(bind)不更新 View

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

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

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

为什么不刷新事件源？

Answer 1

终于解决了。 ionic2-日历github有一个事件可以强制加载事件，如果手动更改事件是必要的。添加以下内容以引用 TS 文件中的日历，并对其调用 loadEvents 函数以刷新 View 。

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

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