PrimeNG组件导入路径错误

时间:2017-08-03 08:08:18

标签: angular typescript primeng

我是Angular的新手,我已经关注This教程并成功获得了结果。现在,我已尝试按照This说明添加日历组件 - 但我无法获得正确的导入路径....

以下是enter image description here

的内容

我收到以下错误:

Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'p-calendar'.
1. If 'p-calendar' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.
2. If 'p-calendar' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("<h1>PrimeNG Hello World</h1>
    <p-calendar [ERROR ->][(ngModel)]="value"></p-calendar>

    <input type="text" pInputText placeholder="Please enter your n"): UserAppComponent@1:16
    at resolvePromise (zone.js:418)
    at resolvePromise (zone.js:403)
    at zone.js:451
    at ZoneDelegate.invokeTask (zone.js:225)
    at Zone.runTask (zone.js:125)
    at drainMicroTaskQueue (zone.js:357)
    at XMLHttpRequest.ZoneTask.invoke (zone.js:297)

这是我的app.component.ts:

     import {Component, ViewEncapsulation} from '@angular/core';
        import {ConfirmationService, Message} from "primeng/components/common/api";
        import {CalendarModule} from "primeng/components/calendar/calendar"; // path not working
        import {ButtonModule} from 'primeng/primeng'; // path not working


        @Component({
            selector: 'app',
            template: `<h1>PrimeNG Hello World</h1>
            <p-calendar formControlName="date"></p-calendar> // the calendar component
            <input type="text" pInputText placeholder="Please enter your name"
                   (change)="onChangeEvent($event)" />
            <button pButton type="text"
                    (click)="getReponse()" icon="fa-check" label="Check"></button>

            <p>

                <p-confirmDialog width="400"></p-confirmDialog>`,
            providers:  [ConfirmationService]
        })
        export class UserAppComponent {
            name: string;
            checkUserInput: string;

            constructor(private checkResponseService: ConfirmationService) {}

            onChangeEvent({target}){
                this.name = target.value;
            }

            getReponse(){

                this.checkResponseService.confirm({
                    message: ` Hi ${this.name}, is this your first PrimeNG program?`,
                    header: 'Greeting',
                    icon: 'fa fa-question-circle',
                    accept: () => {

                        this.checkUserInput = this.name + " responded " + "This is his first PrimeNG Program";
                    },
                    reject: () => {
                        this.checkUserInput = this.name + " responded " + "This is not his first PrimeNG Program";
                    }
                });
            }
        }

我无法弄清楚路径错误的原因......因为这条路径是正确的

    import {ConfirmationService, Message} from 
    "primeng/components/common/api";

我只需用&#34;日历/日历&#34;

替换路径

1 个答案:

答案 0 :(得分:2)

这个教程似乎已经过时了。你应该简单地说:

import { CalendarModule } from 'primeng/primeng';

在你的@NgModule中,它应该没问题。