angular2 使用 PrimeNG-Scheduler 实现 FullCalendar-Scheduler

Question

FullCalendar 有一个名为 Scheduler 的附加组件，我正尝试将其与 PrimeNG-Schedule 组件一起使用。查看 PrimeNG 文档，我可以使用 'options' 属性将任意信息发送到 FullCalendar。这确实有效，但是当我将数据检索连接到异步 API 时，它会导致问题。

API 使用我随后在组件中订阅的 Observables。这适用于事件，因为当事件更改时视图会自动更新。

但是，当通过 PrimeNG 'options' 属性为 FullCalendar 提供 'resources' 时，事情没有按预期工作，因为设置 'options' 属性在 API 调用有机会返回之前是运行，因此是空的。

我很确定这一点，因为如果我对资源进行硬编码，一切都会正常进行。

我可以想出几种方法来解决这个问题：

使调用同步（希望避免这种情况）
等待所有数据加载，然后（重新）渲染视图（这与#1 几乎相同）
配置 options.resources 属性以便当它发生变化时，视图得到更新，就像它对事件所做的那样（这是最好的选择，但不确定它是否是甚至可能)

如有任何帮助，我将不胜感激。谢谢。

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

我的（目前）假人API

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);
  }

组件文件

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
      }
}

编辑： 我想到的一件事是，仅通过 setter 方法设置 this.resources 属性。这样，我确切地知道何时设置值，但问题仍然存在如何将新值推送到调度组件 after 它已被初始化。

Answer 1

PS: 我无法重现你的问题所以建议你未经测试

你可以使用 asynch angular2 的管道来获取加载视图，一旦你的数据在视图部分像这样出现

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

甚至您可以使用异步管道直接分配 resource 而不是包装到 optionConfig 中（如果合适的话）。

通过这样做，您既不需要进行同步调用，也不需要在数据加载后重新查看。

如果还有问题请告诉我。

Answer 2

知道了！

使用 *ngIf 延迟组件的渲染，直到 this.resources 有数据。我添加了一个新的布尔值属性 isDataAvailable，默认为 false。然后，this.schedulerService.getResources()仅在资源API调用returns后将其设置为true，此时我还在[=]中设置了resources 属性 18=]

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)
          );  
  }

模板：

<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>

angular2 使用 PrimeNG-Scheduler 实现 FullCalendar-Scheduler

angular2 Implementing FullCalendar-Scheduler with PrimeNG-Scheduler

angular

schedule

primeng

angular2-observables