2017-08-03 75 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