【发布时间】：2022-02-01 21:01:27
【问题描述】：
我是 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();
});
}
});
}
}
在modal中，删除按钮调用函数，
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();
}
为什么没有刷新事件源？
【问题讨论】：
标签： angular typescript ionic2