Nativescript RadCalendar с базой данных реального времени Firebase

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, где проблема может быть воспроизведена.

Edit:

Вот пример Playground , который загружает массив событий асинхронно (с тайм-аутом), события заполняются в RadCalendar, как и ожидалось.