angular2使用PrimeNG-Scheduler实现FullCalendar-Scheduler
FullCalendar有一个名为Scheduler的附加组件,我试图与PrimeNG-Schedule组件一起使用.查看PrimeNG文档,我可以使用“选项”属性向FullCalendar发送任意信息.这确实有效,但是当我将数据检索连接到异步API时,会导致问题.
API使用Observables然后我在组件中订阅.这适用于事件,因为视图在事件更改时自动更新. 但是,当通过PrimeNG’选项’属性向FullCalendar提供’资源’时,事情不能按预期工作,因为设置’options’属性的代码在API调用有机会返回之前运行,因此空. 我确信这一点,因为如果我对资源进行硬编码,就会有所作为. 我可以想出几种方法来解决这个问题: >使调用同步(希望避免这种情况) 我将不胜感激任何帮助.谢谢. <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中,如果合适的话. 通过这样做,您既不需要进行同步调用,也不需要在加载数据后重新加入视图. 如果还有问题,请告诉我. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |