Angular2 Primeng时间表未渲染

Question

我正在尝试使PrimeNG Schedule工作，这就是我得到的：

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"
            }
        ];
    }

}

我在控制台中没有收到任何错误，但也没有日历，我缺少了什么或出了什么问题？

Answer 1

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},

我觉得对你会更好

Angular2 Primeng时间表未渲染

问题描述

1 个解决方案

解决方案1
0 2016-06-09 14:20:20

Angular2 Primeng时间表未渲染

问题描述

1 个解决方案

解决方案1 0 2016-06-09 14:20:20

解决方案1
0 2016-06-09 14:20:20