无法在Angular 2 Webpack应用程序中包含PrimeNG

Question

我正在使用ng2-admin template并试图在其中包含PrimeNG，但我正在努力添加它。

我在模板中做了以下更改，包括PrimeNG

./双人床/vendor.browser.同时:

// Prime faces: http://www.primefaces.org/primeng/#/setup
import 'primeng/primeng';

./双人床/app/app.module.同时:

import { ToggleButtonModule } from 'primeng/primeng';

@NgModule({
  bootstrap: [App],
  declarations: [
    App
  ],
  imports: [ // import Angular's modules
    ...
    ...
    ...
    ToggleButtonModule
  ],
  providers: [ // expose our Services and Providers into Angular's dependency injection
    ENV_PROVIDERS,
    APP_PROVIDERS
  ]
})

./双人床/app/pages/dashboard/dashboard.component.同时:

import { ToggleButtonModule } from 'primeng/primeng';

./双人床/app/pages/dashboard/dashboard.HTML:

<p-toggleButton [(ngModel)]="checked"></p-toggleButton>

我收到以下错误：

无法绑定到'ngModel'，因为它不是'p-toggleButton'的已知属性。

1. 如果'p-toggleButton'是一个Angular组件并且它有'ngModel'输入，那么请验证它是否是该模块的一部分。
2. 如果'p-toggleButton'是Web组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的'@NgModule.schemas'以禁止显示此消息。

如果我从标记中删除ngModel，则会出现以下错误：

'p-toggleButton'不是已知元素：

1. 如果'p-toggleButton'是Angular组件，则验证它是否是此模块的一部分。
2. 如果'p-toggleButton'是Web组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的'@NgModule.schemas'以禁止显示此消息。

在Angular 2-Webpack应用程序中集成PrimeNG的正确方法是什么？我在这里缺少什么？

Answer 1

我还没有使用过PrimeNG，但我正在研究它。

但是，我认为您的问题更容易解决。 ngModel来自Angular FormsModule。他们的文档可以使这种依赖更清晰。

将此添加到您的NgModule。

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    ...
    FormsModule
  ],
  ...
});

Answer 2

请在./src/app/pages/dashboard/dashboard.component.ts:中导入

import {ToggleButtonModule} from 'primeng/togglebutton';


export class DashboardComponent {
    checked: boolean;
}

在./src/app/app.module.ts中

import { FormsModule } from '@angular/forms';     
    @NgModule({
      imports: [        
        FormsModule
      ]      
    })