angular2 使用 PrimeNG-Scheduler 实现 FullCalendar-Scheduler

Question

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

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

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

我确信这一点，因为如果我对资源进行硬编码，一切都会奏效。

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

1. 使调用同步（希望避免这种情况）

2. 等待所有数据加载，然后（重新）渲染视图（使其与 #1 几乎相同）

3. 配置 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 属性。这样，我可以准确地知道值是在什么时候被设置的，但是问题仍然存在我如何才能将新值推送到调度组件在它已经被初始化之后。

Answer 1

PS：我无法重现您的问题，因此建议您未经测试

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

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

或者你甚至可以使用异步管道直接分配resource，而不是在合适的情况下包装到optionConfig。

这样做，您既不需要进行同步调用，也不需要在加载数据后重新渲染视图。

如果还有问题，请告诉我。

Answer 2

我明白了！

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

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>