2017-08-03 92 views
2

我新手角,我已经按照This教程,并成功获得结果。现在,我已经尝试通过以下This说明添加日历组件 - 但我不能得到正确的导入路径....PrimeNG组件错误导入路径

这就是它的样子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"): [email protected]: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"; 
        } 
       }); 
      } 
     } 

我想不通为什么路径错了......因为这拍h是正确

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

我简单地用“日历/日历”

+0

你试过=>进口:CalendarModule]在您的@NgModule,甚至在你的出口:CalendarModule]? –

+0

谢谢 - 是的 - 它仍然是灰色的...不能为什么... – RoyBarOn

回答

2

本教程似乎已经过时替代的路径。您应该简单地:

import { CalendarModule } from 'primeng/primeng'; 

@NgModule,它应该没问题。

+0

是的好..我试过了...不能真正理解为什么它是灰色的 – RoyBarOn

+0

你可以提供你的'@ NgModule'类代码? – Haseoh

+0

当然 - 我已经更新后 - 感谢 – RoyBarOn