如何使用Ionic Native日历插件通过JSON动态添加日历事件

Question

你好，

我目前正在构建一个ionic应用程序，并使用ionic Native Calendar插件。我希望使用这个插件能够通过链接到Firebase数据库的JSON动态更改与之相关的日历事件参数，而不是根据演示在应用程序中设置这些参数(因为我的日历事件总是会更改)。您可以设置的日历参数包括、字符串以及开始和结束日期，这让我相信这可能实现吗？

根据文档，我目前使用以下方法使应用程序运行良好，但根据我目前的情况，这种方法不允许我动态更新数据，因为我必须将日历参数放入应用程序中，特别是home.ts文件中。。。

在我的home.html文件中，我有一个按钮，单击后应该会创建一个日历事件：

<button ion-button (click)="createEvent()">Add to Calendar</button>

在我的home.ts文件中，我有以下功能集：

import firebase from 'firebase';
constructor(...) {
firebase.database().ref('events').on('value', snapshot => {
this.events = snapshot.val();
});
}

然后在constructor之外，仍然在我的home.ts文件中，我编写了以下函数。。。

createEvent() {
this.calendar.createEvent('Easter Celebration', 'myChurch', 'Be there or be square', new Date(2017, 9, 20, 13, 0, 0, 0), 
new Date(2017, 9, 20, 14, 0, 0, 0)).then(() => {
console.log('Event Created!');
}).catch((err) => {
console.log('Oops, something went wrong:', err);
});
}

我当前的JSON结构(它在我的页面上拉入其他信息)目前看起来是这样的：

"events" : [ {
"image" : "http://via.placeholder.com/512x800",
"title" : "Easter Weekend Celebration",
"day" : "10 April 2017",
"photo" : "http://via.placeholder.com/512x512/000",
"address" : "4 Pybus Rd, Sandton, New York“,
"times" : "Sundays, From 08h00 - 11h00",
"info" : "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.”,
"RegisterURL" : "https://www.google.com",
"calendar" : "some-data"

我的JSON文件链接到Firebase数据库。

问题是，我无法使用上面的方法动态更改日历值。我想知道如何通过从JSON文件中调用值来实现这一点，而不是像我的例子那样必须在应用程序中调用值。我已经有一个JSON文件在我的应用程序中动态控制其他数据，所以我也希望能够向其中添加日历值。

Answer 1

我正试图根据您的最新更新来回答这个问题，如果这不是您想要做的，请告诉我，我会相应地更新我的答案：

所以你是说你从firebase获得json，那不是一个文件。

为了在实例变量中始终拥有json的最新版本，您必须创建一个类似于以下的构造：

export class MyClass {
public events; // this is where we save your json data so its accessible in the whole class
constructor(...) { // here you should have injected your firebase lib
firebase.database().ref('events').on('value', snapshot => {
this.events = snapshot.val();
console.log(this.events); // for debugging
});
}
}

然后你可以在createEvent()函数中访问它，如下所示：

createEvent() {
this.calendar
.createEvent(
this.events.events[0].title,
this.events.events[0].address,
...
)
.then(() => {
console.log('Event Created!');
})
.catch(err => {
console.log('Oops, something went wrong:', err);
});
}

请注意，在从firebase加载数据之前，events是undefined。