angular2使用PrimeNG-Scheduler实现FullCalendar-Scheduler

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

API使用Observables然后我在组件中订阅.这适用于事件,因为视图在事件更改时自动更新.

但是,当通过PrimeNG’选项’属性向FullCalendar提供’资源’时,事情不能按预期工作,因为设置’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",new BusinessHours("10:00","18:00"))
    // ];
    this.optionConfig = {
      "resources": this.resources
      }
}

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

解决方法

PS：我无法重现你的问题所以建议你没有经过测试

你可以使用angular2的异步管道来获取视图部分中的数据

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

甚至你可以使用异步管道直接分配资源,而不是包装到optionConfig中,如果合适的话.

通过这样做,您既不需要进行同步调用,也不需要在加载数据后重新加入视图.

如果还有问题,请告诉我.

angular2使用PrimeNG-Scheduler实现FullCalendar-Scheduler

解决方法

猜你在找的Angularjs相关文章