angular - PrimeNG组件导入路径错误

标签 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";

我只是将路径替换为“calendar/calendar”

最佳答案

本教程似乎已经过时了。您应该简单地:

import { CalendarModule } from 'primeng/primeng';

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

关于angular - PrimeNG组件导入路径错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45478387/

相关文章:

javascript - 你如何在 Angular 中循环遍历不同的行(引导行)?

angular - 使用索引甚至在键值管道中

javascript - 将 Typescript 转换为 Javascript 的最佳实践

html - 如何处理鼠标中键的 Angular(单击)事件?

angular - 如何在 PrimeNg 中获取没有掩码字符的值?

angular - Primeng - 无法在列中显示数组项

Angular 9 项目在生产环境中不起作用

javascript - 如何让基本泛型类型知道 TypeScript 中的子泛型?

angular - Prime-NG P-CHIPS 数字仅用于数字数组

javascript - 在多个组件中调用一个组件。 Angular 4