angular - Fullcalendar v4 - 资源(作为函数): fetchInfo is null

Question

所以我在 github 页面上发布了一个关于 angular fullcalendar 的问题，但我想我会在这里尝试一下，看看是否有人能发现我的代码的问题，或者我是否发现了一个错误。

所以我在时间线 View 中加载资源时遇到了问题。下面是我所做的一个简单的娱乐:

组件.ts:

import { Component, OnInit, ViewChild, Input, AfterViewInit, OnDestroy } from '@angular/core';
import { FullCalendarComponent } from '@fullcalendar/angular';
import { CalendarFunctionsService } from '@_shared/calendar-functions.service';
import resourceCommon from '@fullcalendar/resource-common';
import resourceTimelinePlugin from '@fullcalendar/resource-timeline';
import moment from 'moment';
import { take } from 'rxjs/operators';

@Component({
  selector: 'app-acalendar',
  templateUrl: './acalendar.component.html',
  styleUrls: ['./acalendar.component.sass']
})
export class AcalendarComponent implements OnInit, AfterViewInit, OnDestroy {
  @Input() calendarOutlet: string;
  @ViewChild('calendar', {static: true}) calendarComponent: FullCalendarComponent;
  initialLoad: boolean = true;
  options: any;

events = (fetchInfo, successCallback, failureCallback) => {
    // debugger;
    this.week = this.fns.weekResolver(fetchInfo);
    this.day = fetchInfo.start.getDay();
    // console.log(this.week + " " + this.day);
    this.adminApi.getSlots(this.week, this.day).pipe(take(1)).subscribe (
      res => { if (res && this.initialLoad === true) {
          this.alertService.success('Availability slots successfully loaded!', true);
          successCallback(res);
        } else { successCallback(res); console.log("loaded events") }
      },
      error => { console.log("response: " + error); this.alertService.error("There was a problem loading availabilities: " + error );
    })
  }
resources = (fetchInfo, successCallback, failureCallback) => {
    // debugger;
   // the following line is commented because fetchInfo is undefined:
   // this.adminApi.getSlots(this.fns.weekResolver(fetchInfo), fetchInfo.start.getDay())
   // using scalar values because fetchInfo is undefined
    this.adminApi.getSlots(47, 3)
    .pipe(take(1))
    .subscribe (
      res => {
        let resourceArray = [];
        if (res && this.initialLoad == true){
          this.alertService.success('Availability slots loaded', true);
          this.initialLoad = false;
          for (let item of res){
            resourceArray.push({id: item.resourceId, title: item.caregiver, caregiver: item.caregiver, day: this.fns.dayNameResolver(item.day)})
          }
          successCallback(resourceArray);
        }
      },
      error => {console.log("response: "+error); this.alertService.error("There was a problem loading availabilities: "+error);}
    )
}
constructor (
    private alertService: AlertService,
    private adminApi: AdminApiService,
    private fns: CalendarFunctionsService
  ) {  }

ngOnInit() {
this.options = {
      plugins: [resourceCommon, resourceTimelinePlugin],
      header: {
        left: '',
        center: 'title',
        right: 'day, prev, next'
      },
      views: {
        resourceTimelineDay: {
          type: 'resourceTimelineDay',
          minTime: '06:00:00',
          maxTime: '24:00:00',
          slotDuration: '00:30:00',
          resourceOrder: 'caregiver',
          resourceLabelText: 'Caregiver',
          resourceAreaWidth: '15%',
          refetchResourcesOnNavigate: true,
        }
      },
    }
  }

ngAfterViewInit(): void {
    //Called after ngAfterContentInit when the component's view has been initialized. Applies to components only.
    //Add 'implements AfterViewInit' to the class.
    console.log("Api: ");
    console.log(this.calendarComponent.getApi());
    this.calendarComponent.getApi().refetchResources;

  }

组件.html.ts:

<full-calendar #calendar
  schedulerLicenseKey = "GPL-My-Project-Is-Open-Source"
  [plugins] = "this.options.plugins"
  defaultView = "resourceTimelineDay"
  [header] = "this.options.header"
  [views] = "this.options.views"
  contentHeight = "auto"
  [events] = "events"
  [resources] = "resources"
  >
</full-calendar>

日历的共享模块:

import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FullCalendarModule } from '@fullcalendar/angular';

import { EcalendarComponent } from '@layouts/components/ecalendar/ecalendar.component';
import { AcalendarComponent } from '@layouts/components/acalendar/acalendar.component';

@NgModule({
  imports: [
    CommonModule,
    FullCalendarModule
  ],
  declarations: [
    EcalendarComponent,
    AcalendarComponent
  ],
  exports: [
    EcalendarComponent,
    AcalendarComponent
  ],
  providers: [],
  bootstrap: []
})
export class CalendarModule {
  // static forRoot(): ModuleWithProviders {
  //   return {
  //     ngModule: CalendarModule,
  //     providers: [ ]
  //   };
  // }
}

如您所见，我将资源用作函数。使用标量值时，一切正常，但我无法使用传递到后端的动态信息。

所以我做了一点挖掘并了解到虽然正在填充事件选项，但没有填充资源。事实上，我得到的资源为空 range在以下代码中， if (arg.range) 失败部分。

registerResourceSourceDef({
    parseMeta: function (raw) {
        if (typeof raw === 'function') {
            return raw;
        }
        else if (typeof raw.resources === 'function') {
            return raw.resources;
        }
        return null;
    },
    fetch: function (arg, success, failure) {
        var dateEnv = arg.calendar.dateEnv;
        var func = arg.resourceSource.meta;
        var publicArg = {};
        if (arg.range) {
            publicArg = {
                start: dateEnv.toDate(arg.range.start),
                end: dateEnv.toDate(arg.range.end),
                startStr: dateEnv.formatIso(arg.range.start),
                endStr: dateEnv.formatIso(arg.range.end),
                timeZone: dateEnv.timeZone
            };
        }
        // TODO: make more dry with EventSourceFunc
        // TODO: accept a response?
        unpromisify(func.bind(null, publicArg), function (rawResources) {
            success({ rawResources: rawResources }); // needs an object response
        }, failure // send errorObj directly to failure callback
        );
    }
});

我尝试了很多不同的方法来解决资源问题，但不幸的是，我在获取 arg.range 时一直为 null
我尝试从时间线 View 切换到 timeGrid View ，当然仍然使用资源，但它仍然会产生相同的问题。

包.json:

"dependencies": {
    "@angular/animations": "^8.2.4",
    "@angular/cdk": "^8.1.4",
    "@angular/common": "~8.2.3",
    "@angular/compiler": "~8.2.3",
    "@angular/core": "~8.2.3",
    "@angular/forms": "~8.2.3",
    "@angular/material": "^8.1.4",
    "@angular/platform-browser": "~8.2.3",
    "@angular/platform-browser-dynamic": "~8.2.3",
    "@angular/router": "~8.2.3",
    "@auth0/angular-jwt": "^3.0.0",
    "@fortawesome/angular-fontawesome": "^0.3.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.22",
    "@fortawesome/free-solid-svg-icons": "^5.10.2",
    "@fullcalendar/angular": "^4.3.1",
    "@fullcalendar/bootstrap": "^4.3.0",
    "@fullcalendar/core": "^4.3.1",
    "@fullcalendar/daygrid": "^4.3.0",
    "@fullcalendar/interaction": "^4.3.0",
    "@fullcalendar/luxon": "^4.3.0",
    "@fullcalendar/moment": "^4.3.0",
    "@fullcalendar/resource-common": "^4.3.1",
    "@fullcalendar/resource-daygrid": "^4.3.0",
    "@fullcalendar/resource-timegrid": "^4.3.0",
    "@fullcalendar/resource-timeline": "^4.3.0",
    "@fullcalendar/timegrid": "^4.3.0",
    "@fullcalendar/timeline": "^4.3.0",
    "@ng-bootstrap/ng-bootstrap": "^5.1.0",
    "@types/jquery": "^3.3.31",
    "bootstrap-css-only": "^4.3.1",
    "bulma": "^0.7.5",
    "chart.js": "^2.8.0",
    "express": "^4.17.1",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "jquery": "^3.4.1",
    "ngx-uploader": "^7.1.0",
    "particles.js": "^2.0.0",
    "perfect-scrollbar": "^1.4.0",
    "rxjs": "~6.4.0",
    "shortid": "^2.2.15",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
"devDependencies": {
    "@angular-devkit/build-angular": "~0.803.1",
    "@angular/cli": "~8.3.1",
    "@angular/compiler-cli": "~8.2.3",
    "@angular/language-service": "~8.2.3",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^8.9.5",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  }

请指教!

Answer 1

我想到了。显然我放错地方了refetchResourcesOnNavigate: true,
它应该作为括号选项位于 component.html.ts 文件中。

希望这对其他人有帮助。