带有Firebase实时数据库的Nativescript RadCalendar

Question

我试图检索事件列表，并在本机脚本的My RadCalender中显示它，firebase方法检索数据，并且可以在控制台中打印结果，但是当我尝试在RadCalendar上添加数据时，我无法看到它，我也没有看到任何错误！可以帮忙

onPageLoad还是在日历中加载这些事件的最佳位置吗？

这是代码

Firebase查询：

public queryValues(): Array<any> {
    var eventsArray: Array<any> = new Array();
    var onQueryEvent = function (result) {

        if (!result.error) {
            console.info(result.value)
            eventsArray.push(result.value);
        }
    };

    firebase.query(
        onQueryEvent,
        "/events",
        {
            singleEvent: false,
            orderBy: {
                type: firebase.QueryOrderByType.CHILD,
                value: 'since'
            }
        }
    );

    return eventsArray;
}

日历视图模型

import { Observable } from "tns-core-modules/data/observable";
import * as  calendarModule from "nativescript-ui-calendar";
import { DBUtil } from "../services/dbutil"

export class CalenderViewModel extends Observable {
    private _dbUtil: DBUtil;
    private dbEvents: Array<EventData>;
    private _events: Array<any>;

    constructor() {
        super();
        this._dbUtil = new DBUtil();
        this.dbEvents = this._dbUtil.queryValues();
        this._events = [];
        for (var i = 0; i < this.dbEvents.length; i++) {
            var eventElement = JSON.parse(<any>this.dbEvents[i]);
            let date = new Date(eventElement.event.dateDate);
            let fullYear = date.getFullYear();
            let month = date.getMonth();
            let day = date.getDate();

            let startTimeHours = new Date(eventElement.event.startDateTime).getHours();
            let startTimeMinutes = new Date(eventElement.event.startDateTime).getMinutes();

            let endTimeHours = new Date(eventElement.event.endDateTime).getHours();
            let endTimeMinutes = new Date(eventElement.event.endDateTime).getMinutes();

            var startDate = new Date(fullYear,month,day,startTimeHours,startTimeMinutes);
            var endDate = new Date(fullYear,month,day,endTimeHours,endTimeMinutes);

            var event = new calendarModule.CalendarEvent(eventElement.event.title, startDate, endDate);
            this._events.push(event);
        }

    }


    get events():  Array<any> {
        return this._events;
    }
}

export class EventData {
    private title: string;
    private description: string;
    private dateDate: string;
    private endDateTime: number;
    private startDateTime: number;

    constructor(title: string, description: string,dateDate: string, startDateTime: number, endDateTime: number){
        this.title = title;
        this.description =description;
        this.dateDate =dateDate;
        this.startDateTime =startDateTime;
        this.endDateTime = endDateTime;
    }
}

日历视图

import { CalenderViewModel } from "./calendar-view-model";
import { Page } from "tns-core-modules/ui/page";
import * as frameNavigation from '../shared/navigation';
import { EventData } from "tns-core-modules/data/observable";
import { View } from "tns-core-modules/ui/page";


export function pageLoaded(args) {
    let page = <Page>args.object;
    let clnViewModel = new CalenderViewModel();
    (<View>args.object).bindingContext = clnViewModel;
}

日历xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:calendar="nativescript-ui-calendar" loaded="pageLoaded">
    <ActionBar title="D-shop" android.icon="res://icon" android.iconVisibility="always">
     <ActionItem tap="onAdd"
      ios.systemIcon="4" 
      android.systemIcon="ic_menu_add"
      ios.position="right"
      android.position="right" tap="onAddClicked">
      </ActionItem>
    </ActionBar>
    <calendar:RadCalendar id="myCalendar" eventSource="{{ events }}" viewMode="Day" />
</Page>

Answer 1

首先，更改检测将永远不会发生，因为_events是一个简单的属性，它假设是一个ObservableProperty，可以通过.set('propertyName', value)方法进行更新，或者应该使用ObservableProperty装饰器。

>

第二，仅将元素从数组中推出/弹出不会更新日历，您将不得不通过创建新元素并注入新元素来替换数组的引用。

如果您仍然遇到问题，请分享一个Playgorund示例，在该示例中可以重现该问题。

编辑：

这里是Playground Sample，它以异步方式（带有超时）加载事件数组，事件将按预期方式填充到RadCalendar中。