Angular4和Devextreme调度程序
我尝试使用devexpress的调度器插件进入我的项目。 在使用angular度Cli创build项目并使用以下命令安装devexpress插件之后：
npm install –save devextreme devextreme-angular
这是我在我的项目中得到的：
calendrier.component.css
/deep/ .options { padding: 20px; background-color: #f5f5f5; margin-top: 20px; } /deep/ .caption { font-size: 18px; font-weight: 500; } /deep/ .option { margin-top: 10px; display: inline-block; width: 19%; } /deep/ .switcher-mode { width: 100%; } /deep/ .option > span { margin-right: 10px; } /deep/ .option > .dx-selectbox { display: inline-block; vertical-align: middle; } calendrier.component.html
<dx-scheduler style="height: 100%; display: block" [dataSource]="appointmentsData" [currentDate]="currentDate" startDateExpr="StartDate" endDateExpr="EndDate" textExpr="Text" [views]="['agenda','workWeek']" currentView="workWeek" [firstDayOfWeek]="1" [startDayHour]="9" [endDayHour]="19" [resources]="resourcesData" ></dx-scheduler>
calendrier.component.ts
import { NgModule, Component, enableProdMode } from '@angular/core'; import {BrowserModule} from '@angular/platform-browser'; import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; import {Appointment, Resource, Service} from './calendrier.service'; import {DxSchedulerModule, DxCheckBoxModule, DxSelectBoxModule} from 'devextreme-angular'; if(!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'calendrier', templateUrl: './calendrier.component.html', styleUrls: ['./calendrier.component.css'], providers: [Service] }) export class CalendrierComponent { appointmentsData: Appointment[]; currentDate: Date = new Date(2015, 4, 25); resourcesData: Resource[]; switchModeNames: string[]; constructor(service: Service) { this.switchModeNames = ["Tabs", "Drop-Down Menu"]; this.appointmentsData = service.getAppointments(); this.resourcesData = service.getResources(); } } @NgModule({ imports: [ BrowserModule, DxSchedulerModule, DxCheckBoxModule, DxSelectBoxModule ], declarations: [CalendrierComponent], bootstrap: [CalendrierComponent] }) export class CalendrierModule {} platformBrowserDynamic().bootstrapModule(CalendrierModule)
calendrier.component.service
import { Injectable } from "@angular/core"; export class Appointment { text: string; ownerId: number[]; startDate: Date; endDate: Date; allDay?: boolean; recurrenceRule?: string; } export class Resource { text: string; id: number; color: string; } let appointments: Appointment[] = [ { text: "Website Re-Design Plan", ownerId: [4], startDate: new Date(2015, 4, 25, 9, 30), endDate: new Date(2015, 4, 25, 11, 30) }, { text: "Book Flights to San Fran for Sales Trip", ownerId: [2], startDate: new Date(2015, 4, 25, 12, 0), endDate: new Date(2015, 4, 25, 13, 0), allDay: true }, { text: "Install New Router in Dev Room", ownerId: [1], startDate: new Date(2015, 4, 25, 14, 30), endDate: new Date(2015, 4, 25, 15, 30) }, { text: "Approve Personal Computer Upgrade Plan", ownerId: [3], startDate: new Date(2015, 4, 26, 10, 0), endDate: new Date(2015, 4, 26, 11, 0) }, { text: "Final Budget Review", ownerId: [1], startDate: new Date(2015, 4, 26, 12, 0), endDate: new Date(2015, 4, 26, 13, 35) }, { text: "New Brochures", ownerId: [4], startDate: new Date(2015, 4, 26, 14, 30), endDate: new Date(2015, 4, 26, 15, 45) }, { text: "Install New Database", ownerId: [2], startDate: new Date(2015, 4, 27, 9, 45), endDate: new Date(2015, 4, 27, 11, 15) }, { text: "Approve New Online Marketing Strategy", ownerId: [3, 4], startDate: new Date(2015, 4, 27, 12, 0), endDate: new Date(2015, 4, 27, 14, 0) }, { text: "Upgrade Personal Computers", ownerId: [2], startDate: new Date(2015, 4, 27, 15, 15), endDate: new Date(2015, 4, 27, 16, 30) }, { text: "Customer Workshop", ownerId: [3], startDate: new Date(2015, 4, 28, 11, 0), endDate: new Date(2015, 4, 28, 12, 0), allDay: true }, { text: "Prepare 2015 Marketing Plan", ownerId: [1, 3], startDate: new Date(2015, 4, 28, 11, 0), endDate: new Date(2015, 4, 28, 13, 30) }, { text: "Brochure Design Review", ownerId: [4], startDate: new Date(2015, 4, 28, 14, 0), endDate: new Date(2015, 4, 28, 15, 30) }, { text: "Create Icons for Website", ownerId: [3], startDate: new Date(2015, 4, 29, 10, 0), endDate: new Date(2015, 4, 29, 11, 30) }, { text: "Upgrade Server Hardware", ownerId: [4], startDate: new Date(2015, 4, 29, 14, 30), endDate: new Date(2015, 4, 29, 16, 0) }, { text: "Submit New Website Design", ownerId: [1], startDate: new Date(2015, 4, 29, 16, 30), endDate: new Date(2015, 4, 29, 18, 0) }, { text: "Launch New Website", ownerId: [2], startDate: new Date(2015, 4, 29, 12, 20), endDate: new Date(2015, 4, 29, 14, 0) }, { text: "Stand-up meeting", ownerId: [1, 2, 3, 4], startDate: new Date(2015, 4, 25, 9, 0), endDate: new Date(2015, 4, 25, 9, 15), recurrenceRule: "FREQ=DAILY;BYDAY=MO,TU,WE,TH,FR;UNTIL=20150530" } ]; let resources: Resource[] = [ { text: "Samantha Bright", id: 1, color: "#cb6bb2" }, { text: "John Heart", id: 2, color: "#56ca85" }, { text: "Todd Hoffman", id: 3, color: "#1e90ff" }, { text: "Sandra Johnson", id: 4, color: "#ff9747" } ]; @Injectable() export class Service { getAppointments(): Appointment[] { return appointments; } getResources(): Resource[] { return resources; } }
的index.html
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CroissantBoard</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.1.4/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.1.4/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/17.1.4/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/zone.js@0.6.25/dist/zone.js"></script> <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script> <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <calendrier>Loading...</calendrier> </div> </body> </html>
当我启动项目使用
服务
但我有一个问题…我的日历是空白的…你有一个想法，我怎么能看到谁是在“calendrier.service.ts”
这是我在我的控制台上：
compiler.es5.js:1689 Uncaught Error: Template parse errors: Can't bind to 'dataSource' since it isn't a known property of 'dx-scheduler'. 1. If 'dx-scheduler' is an Angular component and it has 'dataSource' input, then verify that it is part of this module. 2. If 'dx-scheduler' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<dx-scheduler style="height: 100%; display: block" [ERROR ->][dataSource]="appointmentsData" [currentDate]="currentDate" startDateExpr="StartDate" "): ng:///AppModule/CalendrierComponent.html@2:4 Can't bind to 'currentDate' since it isn't a known property of 'dx-scheduler'. 1. If 'dx-scheduler' is an Angular component and it has 'currentDate' input, then verify that it is part of this module. 2. If 'dx-scheduler' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" style="height: 100%; display: block" [dataSource]="appointmentsData" [ERROR ->][currentDate]="currentDate" startDateExpr="StartDate" endDateExpr="EndDate" "): ng:///AppModule/CalendrierComponent.html@3:4 Can't bind to 'views' since it isn't a known property of 'dx-scheduler'. 1. If 'dx-scheduler' is an Angular component and it has 'views' input, then verify that it is part of this module. 2. If 'dx-scheduler' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" endDateExpr="EndDate" textExpr="Text" [ERROR ->][views]="['agenda','workWeek']" currentView="workWeek" [firstDayOfWeek]="1" "): ng:///AppModule/CalendrierComponent.html@7:4 Can't bind to 'firstDayOfWeek' since it isn't a known property of 'dx-scheduler'. 1. If 'dx-scheduler' is an Angular component and it has 'firstDayOfWeek' input, then verify that it is part of this module. 2. If 'dx-scheduler' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" [views]="['agenda','workWeek']" currentView="workWeek" [ERROR ->][firstDayOfWeek]="1" [startDayHour]="9" [endDayHour]="19" "): ng:///AppModule/CalendrierComponent.html@9:4 Can't bind to 'startDayHour' since it isn't a known property of 'dx-scheduler'. 1. If 'dx-scheduler' is an Angular component and it has 'startDayHour' input, then verify that it is part of this module. 2. If 'dx-scheduler' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" currentView="workWeek" [firstDayOfWeek]="1" [ERROR ->][startDayHour]="9" [endDayHour]="19" [resources]="resourcesData" "): ng:///AppModule/CalendrierComponent.html@10:4 Can't bind to 'endDayHour' since it isn't a known property of 'dx-scheduler'. 1. If 'dx-scheduler' is an Angular component and it has 'endDayHour' input, then verify that it is part of this module. 2. If 'dx-scheduler' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" [firstDayOfWeek]="1" [startDayHour]="9" [ERROR ->][endDayHour]="19" [resources]="resourcesData" ></dx-scheduler> "): ng:///AppModule/CalendrierComponent.html@11:4 Can't bind to 'resources' since it isn't a known property of 'dx-scheduler'. 1. If 'dx-scheduler' is an Angular component and it has 'resources' input, then verify that it is part of this module. 2. If 'dx-scheduler' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" [startDayHour]="9" [endDayHour]="19" [ERROR ->][resources]="resourcesData" ></dx-scheduler> "): ng:///AppModule/CalendrierComponent.html@12:4 'dx-scheduler' is not a known element: 1. If 'dx-scheduler' is an Angular component, then verify that it is part of this module. 2. If 'dx-scheduler' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<dx-scheduler style="height: 100%; display: block" [dataSource]="appointmentsData" "): ng:///AppModule/CalendrierComponent.html@0:0 at syntaxError (http://localhost:4200/vendor.bundle.js:260856:34) at TemplateParser.webpackJsonp.../../../compiler/@angular/compiler.es5.js.TemplateParser.parse (http://localhost:4200/vendor.bundle.js:271969:19) at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:286019:39) at http://localhost:4200/vendor.bundle.js:285939:62 at Set.forEach (native) at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:285939:19) at http://localhost:4200/vendor.bundle.js:285826:19 at Object.then (http://localhost:4200/vendor.bundle.js:260846:148) at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents (http://localhost:4200/vendor.bundle.js:285825:26) at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync (http://localhost:4200/vendor.bundle.js:285754:37)
你能看看吗？
您正在使用您的类中错误的字段名称，它们是appointmentsData和resourcesData ：
<dx-scheduler style="height: 100%; display: block" [currentDate]="currentDate" startDateExpr="StartDate" endDateExpr="EndDate" textExpr="Text" [views]="['agenda','workWeek']" currentView="workWeek" [firstDayOfWeek]="1" [startDayHour]="9" [endDayHour]="19" [dataSource]="appointmentsData" // <-- here [resources]="resourcesData" // <-- and here ></dx-scheduler>
您需要将DxDataGrid模块导入到您的模块中：
@NgModule({ imports: [ CommonModule, DxDataGridModule ], ...