Question

我得到了一个组件，该组件由日历（fullcalendar.io V4）和必须包含事件信息的简单文本组成。 Fullcalendar集成了一个功能，使我能够知道单击了哪个元素。这是下面的功能：

  eventClick: function (info) {
    this.modal_title = "Reservation : ";
    this.modal_start = info.event.start;
    this.modal_end = info.event.end;

    console.log("start : " + this.modal_start);
    console.log("end : " + this.modal_end);
  }

在此函数中，我有一个名为modal_title / start / end的变量。在此变量中，我存储我的info.event数据，以便将其显示到html视图中。 console.log仅在此处用于调试，并且可以完美运行。

在我组件的html部分中，我只显示日历和变量。这是完整的代码：

<div id="calendar"></div>

<p>title : {{modal_title}}</p>
<p>arival : {{modal_start}}</p>
<p>leave : {{modal_end}}</p>

我只显示了这个...

title : plop

arival :

leave :

我不明白为什么这种简单的数据绑定无法正常工作。这可能是由于与FullCalendar发生冲突所致，但是我不知道该如何解决。感谢您的帮助。

这是我组件的完整代码。

//general import
import { Component, OnInit, Input } from '@angular/core';
import { ViewChild } from '@angular/core';

//import pour modal
import { TemplateRef } from '@angular/core';

//service
import { IcsService } from '../../_Services/ics.service';
import { visitAll } from '@angular/compiler';

//variables
declare const FullCalendar: any;
declare const $: any;

@Component({
    selector: 'app-scheduler',
    templateUrl: './scheduler.component.html',
    styleUrls: ['./scheduler.component.css']
})
/** scheduler component*/
export class SchedulerComponent implements OnInit {
  ressources: any;
  event: any;
  modal_title: any = "plop";
  modal_start: any;
  modal_end: any;
  /** scheduler ctor */
  constructor(private ics_service: IcsService) {}

  ngOnInit() {
    this.ics_service.GetAllRessources().subscribe(result => {
      this.ressources = result;
      console.log(this.ressources);
      this.ics_service.GetAllEvents().subscribe(result => {
        this.event = result;
        console.log(this.event);
        this.calendar();
      });
    });

  }


  calendar() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
      schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
      locale: 'fr',
      now: Date.now(),
      defaultDate: Date.now() - 172800000, //date où sa commence le schedule - 2 jours
      editable: false,
      aspectRatio: 2,
      header: {
        left: 'today prev,next',
        center: 'title',
        right: 'Scheduler, month',
      },
      titleFormat: { // will produce something like "Tuesday, September 18, 2018"
        month: 'long',
        year: 'numeric',
        day: 'numeric',
        weekday: 'long'
      },
      defaultView: 'Scheduler',
      views: {
        Scheduler: {
          type: 'timeline',
          duration: { days: 20 },
        }
      },
      resourceLabelText: 'Rooms',
      height: 'auto',
      resources: this.ressources,
      events: this.event,
      eventClick: function (info) {
        //document.getElementById("openModalButton").click();
        this.modal_title = "Reservation : ";
        this.modal_start = info.event.start;
        this.modal_end = info.event.end;

        console.log("start : " + this.modal_start);
        console.log("end : " + this.modal_end);
      },
      eventMouseEnter: function (info) {
      }
    });
    calendar.render();
  }
}

Answer 1

this.modal_ *值在日历功能内不可用，此关键字仅指向当前活动的可用功能。

单向数据绑定不适用于FullCalendar和Angular

1 个答案: