angular2 Implémentation de FullCalendar-Scheduler avec PrimeNG-Scheduler

Question

FullCalendar possède un module complémentaire appelé Scheduler que j'essaie d'utiliser avec le composant PrimeNG-Schedule. En regardant la documentation de PrimeNG, il y a une propriété 'options' que je peux utiliser pour envoyer des informations arbitraires à FullCalendar. Cela fonctionne, mais lorsque je connecte la récupération des données à une API asynchrone, cela pose des problèmes.

L'API utilise des observables auxquels je m'abonne dans le composant. Cela fonctionne bien pour les événements car la vue est mise à jour automatiquement lorsque les événements sont modifiés.

Cependant, lorsque l'on fournit des "ressources" au calendrier complet via la propriété PrimeNG "options", les choses ne fonctionnent pas comme prévu car le code permettant de définir la propriété "options" est exécuté avant que l'appel à l'API n'ait eu le temps de revenir et est donc vide.

J'en suis sûr parce que si je code en dur les ressources, les choses fonctionnent.

Je pense qu'il y a plusieurs façons de remédier à ce problème :

1. Rendre les appels synchrones (j'aimerais éviter cela)

2. Attendre que toutes les données soient chargées, puis (re)rendre la vue (ce qui revient à peu près au même que le point 1)

3. Configurer la propriété options.resources de telle sorte que lorsqu'elle change, la vue soit mise à jour, comme pour les événements (c'est la meilleure option, mais je ne suis pas sûr qu'elle soit possible).

J'apprécierais toute aide. Je vous remercie de votre aide.

<p-schedule 
    [events]="events" 
    [businessHours]="businessHours"
    [options]="optionConfig"
    >
</p-schedule>

Mon API (pour l'instant) factice

getEvents() {
    return this.http
    .get('assets/api/mockEvents.json')
    .map((response : Response) => <Appointment[]>response.json().data)
    .catch(this.handleError);
  }

  getResources() {
    return this.http
    .get('assets/api/mockResources.json')
    .map((response : Response) => <Resource[]>response.json().data)
    .catch(this.handleError);
  }

Fichier de composants

ngOnInit() {

  this.schedulerService.getEvents()
      .subscribe(events=> this.events = events);

      this.schedulerService.getResources()
      .subscribe(resources => this.resources = resources);
      // ***** If the following code is uncommented, resources are displayed in Schedule view ****
    // this.resources = [
    //     new Resource(1, "Dr. Hibbert", "blue", true, new BusinessHours("08:00", "16:00")),
    //     new Resource(2, "Dr. Simpson", "green", true, new BusinessHours("10:00", "18:00"))
    // ];
    this.optionConfig = {
      "resources": this.resources
      }
}

Editer : Une chose à laquelle j'ai pensé est de régler le this.resources uniquement via sa méthode setter. De cette façon, je sais exactement quand la valeur est définie, mais le problème reste entier : comment puis-je transmettre la nouvelle valeur au composant de planification ? après il a été initialisé.

Answer 1

PS : Je ne suis pas en mesure de reproduire votre problème et je vous suggère donc de ne pas le tester.

vous pouvez utiliser asynch Le tuyau d'angular2 permet de charger la vue une fois que les données sont arrivées comme ceci dans la partie vue

<p-schedule 
    [events]="events" 
    [businessHours]="businessHours"
    [options]="optionConfig | async"
    >
</p-schedule>

ou même vous pouvez assigner directement resource en utilisant le tuyau asynchrone au lieu de l'envelopper dans optionConfig le cas échéant.

En procédant ainsi, il n'est pas nécessaire d'effectuer un appel synchrone ni de redéfinir la vue une fois les données chargées.

Si le problème persiste, faites-le moi savoir.

Answer 2

Je l'ai !

Utilisation *ngIf pour retarder le rendu du composant jusqu'à ce que this.resources dispose de données. J'ai ajouté une nouvelle propriété booléenne isDataAvailable en lui attribuant par défaut la valeur "false". Ensuite, this.schedulerService.getResources() le fixe à true qu'après le retour de l'appel de l'API aux ressources, à ce moment-là, j'ai également défini l'option resources propriété en optionConfig

ngOnInit() {
    this.loadResources();
}

private loadResources() {
    this.schedulerService.getResources()
      .subscribe(
          resources => {
            this.resources = resources;
            this.optionConfig['resources'] = this.resources;

            this.isDataAvailable = true;
          } ,
          error => console.log(error)
          );  
  }

Modèle :

<div *ngIf="isDataAvailable; else elseBlock">
     <p-schedule
         [events]="appointments" 
         [options]="optionConfig"
         (onDayClick)="handleDayClick($event)"
         (onEventClick)="handleEventClick($event)"
         (onViewRender)="loadAppointments($event)">
     </p-schedule>
</div>
<ng-template #elseBlock>Loading....</ng-template>