Angular jqxSchedular源localData无法从远程绑定

Posted 2023-05-08

【中文标题】Angular jqxSchedular源localData无法从远程绑定

【英文标题】：Angular jqxSchedular source localData Can't bind from remote

【发布时间】：2020-02-05 05:44:59

【问题描述】：

我正在尝试将 jqxSchedular 用于我的网络应用程序。

Schedular 无法从远程数据绑定。

这是我的 Angular 组件：

export class CourseScheduleComponent implements OnInit 

  appointmentDataFields: any =
  
      from: "start",
      to: "end",
      description: "description",
      subject: "subject",
      resourceId: "calendar"
  ;

 source = 
    dataType: "array",
    dataFields: [
         name: 'id', type: 'string' ,
         name: 'description', type: 'string' ,
         name: 'subject', type: 'string' ,
         name: 'calendar', type: 'string' ,
         name: 'start', type: 'date' ,
         name: 'end', type: 'date' 
    ],
    localData: []


  resources: any = 
  
      colorScheme: "scheme04",
      dataField: "calendar",
      source: new jqx.dataAdapter(this.source)
  ;

  dataAdapter: any;
  date: any = new jqx.date();

  views: string[] | any[] =
  [
      'dayView',
      'weekView',
      'monthView',
      'agendaView'
  ];

  constructor(private repository: RepositoryService,private router: Router,
    private activeRoute: ActivatedRoute )   

  ngOnInit() 
      this.getCourseSchedules().subscribe(res=>
      this.source.localData = res as CourseSchedule[];
    ,err=>
      console.log(err);
    );
      this.dataAdapter = new jqx.dataAdapter(this.source)
  

  getCourseSchedules()
  
    var courseId : string = this.activeRoute.snapshot.params['id'];
    var apiUrl = `/api/course/schedule?courseId=$courseId`;
    return this.repository.getData(apiUrl).pipe(
        map(data => 
            let schedules = data as CourseSchedule[];
            let newSchedules:CourseSchedule[] = [];
            schedules.forEach((schedule) => 
                const start,end,...other = schedule;
                newSchedules.push(<CourseSchedule>
                    start: new Date(start),
                    end: new Date(end),
                    ...other
                )
            );
            return newSchedules;
        )
    );

  

当我调试 ngOnInit 时，设置 localData 没有问题。但是当我查询日志源时，它显示localdata 为空。

我找不到 Angular jqxSchedular 的远程数据绑定示例。

所以，基本上它适用于本地数据，但在远程它不起作用。

请帮助解决这个问题。

【参考方案1】：

您必须使用 addAppointment 方法从 jqx 组件中添加它们，如下所示：

getCourseSchedules()

    let self = this;
    var courseId : string = this.activeRoute.snapshot.params['id'];
    var apiUrl = `/api/course/schedule?courseId=$courseId`;
    return this.repository.getData(apiUrl).pipe(
        map(data => 
            let schedules = data as CourseSchedule[];
            let newSchedules:CourseSchedule[] = [];
            schedules.forEach((schedule) => 
                const start,end,...other = schedule;

                var appointment = 
                 start: new Date(start),
                 end: new Date(end),
                 ..other
                ;

                self.myScheduler.addAppointment(appointment);

            );
        )
    );

详情请咨询API。