2016-06-09 62 views
0

我試圖讓PrimeNG附表工作,這是我有:Angular2 Primeng時間表不渲染

的package.json:

{ 
    "name": "angular2-seed", 
    "version": "1.0.0", 
    "scripts": { 
    "lite": "lite-server", 
    "postinstall": "typings install", 
    "gulp": "gulp", 
    "start": "concurrently \"npm run gulp\" \"npm run lite\" ", 
    "typings": "typings" 
    }, 
    "license": "MIT", 
    "dependencies": { 
    "@angular/common": "2.0.0-rc.1", 
    "@angular/compiler": "2.0.0-rc.1", 
    "@angular/core": "2.0.0-rc.1", 
    "@angular/http": "2.0.0-rc.1", 
    "@angular/platform-browser": "2.0.0-rc.1", 
    "@angular/platform-browser-dynamic": "2.0.0-rc.1", 
    "@angular/router": "2.0.0-rc.1", 
    "@angular/router-deprecated": "2.0.0-rc.1", 
    "@angular/upgrade": "2.0.0-rc.1", 
    "es6-shim": "^0.35.0", 
    "primeng": "^1.0.0-beta.8", 
    "primeui": "^4.1.12", 
    "reflect-metadata": "^0.1.3", 
    "rxjs": "5.0.0-beta.6", 
    "systemjs": "0.19.27", 
    "zone.js": "^0.6.12" 
    }, 
    "devDependencies": { 
    "concurrently": "^2.0.0", 
    "gulp": "^3.9.0", 
    "gulp-autoprefixer": "^3.1.0", 
    "gulp-clean-css": "^2.0.6", 
    "gulp-sass": "^2.3.1", 
    "gulp-sourcemaps": "^1.6.0", 
    "gulp-typescript": "^2.10.0", 
    "lite-server": "^2.1.0", 
    "systemjs-builder": "^0.15.16", 
    "typings": "^0.8.1", 
    "fullcalendar": "^2.7.2", 
    "jquery": "^2.2.4", 
    "jquery-ui": "^1.10.5" 
    } 
} 

systemjs.config.js:

(function(global) { 

    // map tells the System loader where to look for things 
    var map = { 
     'app':      'app', // 'dist', 
     'rxjs':      'node_modules/rxjs', 
     '@angular':     'node_modules/@angular', 
     'primeng':     'node_modules/primeng' 
    }; 

    // packages tells the System loader how to load when no filename and/or no extension 
    var packages = { 
     'app':      { main: 'boot.js', defaultExtension: 'js' }, 
     'rxjs':      { defaultExtension: 'js' }, 
     'primeng':     { defaultExtension: 'js' }, 
    }; 

    var packageNames = [ 
     '@angular/common', 
     '@angular/compiler', 
     '@angular/core', 
     '@angular/http', 
     '@angular/platform-browser', 
     '@angular/platform-browser-dynamic', 
     '@angular/router', 
     '@angular/testing', 
     '@angular/upgrade' 
    ]; 

    // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' } 
    packageNames.forEach(function(pkgName) { 
     packages[pkgName] = { main: 'index.js', defaultExtension: 'js' }; 
    }); 

    var config = { 
     map: map, 
     packages: packages 
    }; 

    // filterSystemConfig - index.html's chance to modify config before we register it. 
    if (global.filterSystemConfig) { global.filterSystemConfig(config); } 

    System.config(config); 

})(this); 

vendor.js:(不知道我是否需要這個文件):

import 'script!jquery/dist/jquery.min.js'; 
import 'script!moment/moment.js'; 
import 'script!fullcalendar/dist/fullcalendar.js'; 

的index.html:

<!doctype> 
<html> 
<head> 
    <base href="/"> 
    <title>Angular 2 Boilerplate</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" type="text/css" href="node_modules/primeui/themes/omega/theme.css" /> 

    <link rel="stylesheet" type="text/css" href="node_modules/primeui/primeui-ng-all.min.css" /> 
    <!-- 1. Load libraries --> 
    <!-- Polyfill(s) for older browsers --> 
    <script src="node_modules/es6-shim/es6-shim.min.js"></script> 

    <script src="node_modules/zone.js/dist/zone.js"></script> 
    <script src="node_modules/reflect-metadata/Reflect.js"></script> 
    <script src="node_modules/systemjs/dist/system.src.js"></script> 

    <!-- 2. Configure SystemJS --> 
    <script src="systemjs.config.js"></script> 


    <link rel="stylesheet" href="src/css/app.css"> 

</head> 
<body> 
<my-app>Loading...</my-app> 

<script> 
    System.import('app').catch(function(err){ console.error(err); }); 
</script> 
<!--<script src="app/bundle.js"></script>--> 
</body> 
</html> 

app.component.ts:

import {Component, ngOnInit} from '@angular/core'; 

import {Schedule} from 'primeng/primeng'; 

@Component({ 
    selector: 'my-app', 
    template: ` 

     <p-schedule [events]="events"></p-schedule> 
    `, 
    directives: [Schedule], 

}) 




export class AppComponent { 

    events: any[]; 

    headerConfig: any; 

    ngOnInit() { 
     this.headerConfig = { 
      left: 'prev,next today', 
      center: 'title', 
      right: 'month,agendaWeek,agendaDay' 
     }; 
    } 

    ngOnInit() { 
     this.events = [ 
      { 
       "title": "All Day Event", 
       "start": "2016-01-01" 
      }, 
      { 
       "title": "Long Event", 
       "start": "2016-01-07", 
       "end": "2016-01-10" 
      }, 
      { 
       "title": "Repeating Event", 
       "start": "2016-01-09T16:00:00" 
      }, 
      { 
       "title": "Repeating Event", 
       "start": "2016-01-16T16:00:00" 
      }, 
      { 
       "title": "Conference", 
       "start": "2016-01-11", 
       "end": "2016-01-13" 
      } 
     ]; 
    } 

} 

我越來越沒有錯誤在控制檯,但沒有日曆要麼,就是我我丟失或出了什麼問題?

+0

你能https://plnkr.co/呢? –

回答

0
ngOnInit() { 
    this.events = [ 
     { 
      "title": "All Day Event", 
      "start": "2016-01-01" 
     }, 
     { 
      "title": "Long Event", 
      "start": "2016-01-07", 
      "end": "2016-01-10" 
     }, 
     { 
      "title": "Repeating Event", 
      "start": "2016-01-09T16:00:00" 
     }, 
     { 
      "title": "Repeating Event", 
      "start": "2016-01-16T16:00:00" 
     }, 
     { 
      "title": "Conference", 
      "start": "2016-01-11", 
      "end": "2016-01-13" 
     } 
    ]; 

    this.headerConfig = { 
     left: 'prev,next today', 
     center: 'title', 
     right: 'month,agendaWeek,agendaDay' 
    }; 
} 

和注射相關

{ src: 'jquery/dist/jquery.min.js', inject: 'libs'}, 
    { src: 'primeui/primeui-ng-all.min.js', inject: 'libs' }, 
    { src: 'primeui/primeui-ng-all.css', inject: true }, 
    { src: 'moment/min/moment.min.js', inject: 'libs'}, 
    { src: 'fullcalendar/dist/fullcalendar.js', inject: 'libs'}, 
    { src: 'fullcalendar/dist/fullcalendar.min.css', inject: true}, 

我認爲這將是更好地爲您

+0

我在哪裏添加Injectable Dependency代碼? –

+0

我使用starter https://github.com/mgechev/angular2-seed,注入依賴於tools/config/project.config.ts 如果你對angular2沒有經驗,它更加舒適和易於啓動,只需閱讀教程並使用primeng和fullcalendar沒有問題 –

+0

我使用這個種子「git clone https://github.com/mschwarzmueller/angular2-seed.git 」,我已經在項目的一半,所以寧願不必須重新開始。這是可以添加到任何項目的東西嗎? –