angular2 使用 PrimeNG-Scheduler 实现 FullCalendar-Scheduler

Question

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

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

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

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

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

1. 使调用同步(希望避免这种情况)

2. 等待所有数据加载，然后(重新)渲染 View (这与 #1 几乎相同)

3. 配置 options.resources 属性，使其在更改时更新 View ，就像它对事件所做的那样(这是最佳选择，但不确定是否可行)

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

<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 管道来获取加载 View ，一旦您的数据在 View 部分像这样出现

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

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

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

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