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

#nativescript

#родной скрипт

Вопрос:

Я пытаюсь повторно просмотреть список событий и показать его в моем 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>
  

Ответ №1:

Прежде всего, обнаружение изменений никогда не произойдет, поскольку _events это простое свойство, оно должно быть ObservableProperty, обновляться с помощью .set('propertyName', value) метода или должно использовать ObservableProperty декоратор.

Во-вторых, простое выталкивание элементов из массива не приведет к обновлению календаря, вам придется заменить ссылку на массив, создав новую, и ввести новые элементы.

Если у вас все еще есть проблемы, пожалуйста, поделитесь примером Playgorund, где проблема может быть воспроизведена.

Редактировать:

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

Комментарии:

1. Я изменил _event на let _events: Array<calendarModule. CalendarEvent> = новый массив<calendarModule. CalendarEvent>(); затем я нажимаю И устанавливаю значение событий this.set(«события», _events); но все та же проблема:-(

2. Можете ли вы дать образец для вашей второй заметки? @Маной