Question

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

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

./ SRC / vendor.browser.ts：

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

./ SRC /应用/ app.module.ts：

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
  ]
})

./ SRC /应用/页/仪表板/ dashboard.component.ts：

import { ToggleButtonModule } from 'primeng/primeng';

./ SRC /应用/页/仪表板/ dashboard.html：

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

我收到以下错误：

无法绑定到'ngModel'，因为它不是已知的属性   'P-切换按钮'。


如果'p-toggleButton'是一个Angular组件并且它有'ngModel'输入，那么请确认它是该模块的一部分。

如果'p-toggleButton'是Web组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的'@ NgModule.schemas'   压制此消息。

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

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


如果'p-toggleButton'是Angular组件，请验证它是否是此模块的一部分。

如果'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
      ]      
    })

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

2 个答案: