angular2 使用 PrimeNG-Scheduler 实现 FullCalendar-Scheduler

Question

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

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

但是，当通过 PrimeNG "选项"属性向 FullCalendar 提供"资源"时，事情不会按预期工作，因为设置"选项"属性的代码在 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。

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

如果仍然存在问题，请告诉我。

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>