尝试在应用程序中使用 PrimeNG 中的 p-Dropdown 时出错
Error when trying to use p-Dropdown from PrimeNG in application
我想在我的应用程序中使用 this PrimeNG-Dropdown。所以我做了什么:
npm i primeng --save
然后我在从 app.module.ts
导入的文件中添加了 DropdownModule
。之后,我在 html:
中包含了以下代码
<p-dropdown [options]="optionList" [(ngModel)]="selectionString" placeholder="Choose one"></p-dropdown>
在 运行 ng serve
并开始 localhost:4200
我收到以下错误:
./node_modules/primeng/components/multiselect/multiselect.js Module
not found: Error: Can't resolve '@angular/cdk/scrolling' in
'%projectroot%\node_modules\primeng\components\multiselect'
我还尝试从 imports
-Array 中删除导入,这导致了不同的错误。我究竟做错了什么?我正在使用 Angular 7 顺便说一句。
删除导入时出现以下错误:
Can't bind to 'options' since it isn't a known property of 'p-dropdown'.
1. If 'p-dropdown' is an Angular component and it has 'options' input, then verify that it is part of this module.
2. If 'p-dropdown' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
<p-dropdown [ERROR ->][options]="optionList" [(ngModel)]="selectionString" placeholder="Choose one"></p-dropdown"): ng:///AppModule/ProjectGeneratorComponent.html@13:18
'p-dropdown' is not a known element:
1. If 'p-dropdown' is an Angular component, then verify that it is part of this module.
2. If 'p-dropdown' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
[ERROR ->]<p-dropdown [options]="optionList" [(ngModel)]="selectionString" placeholder="Choose one">"):
您需要安装Angular CDK。
使用 npm install @angular/cdk --save 命令。
然后使用
在appModule中导入多选模块
import {MultiSelectModule} from 'primeng/multiselect';
在 appmodule.ts 中尝试:
import {CUSTOM_ELEMENTS_SCHEMA} from "@angular/core";
@NgModule({
...
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
如果你想使用prime NG组件,首先你应该做一些步骤并注意它们已经做好了。首先,您应该通过代码编辑器中的终端安装软件包。你应该安装这些:
npm install primeng --save //install prime in your machine
npm install primeicons --save //install prime icon in your machine
下一步:您应该转到项目中的 angular.json 文件,并在样式部分复制这些行。这些行实际上是 node_module 文件夹中库的路径。但本章中真正重要的是,您使用的 angular 是哪个版本。如果您使用的是 angular 版本 4 或更低版本,您应该将这些路径复制到样式章节:
"../node_modules/primeicons/primeicons.css",
"../node_modules/primeng/resources/themes/nova-light/theme.css",
"../node_modules/primeng/resources/primeng.min.css",
但如果您使用的版本超过 4,则意味着 5、6 或 7,您应该复制这些路径:
"./node_modules/primeicons/primeicons.css",
"./node_modules/primeng/resources/themes/nova-light/theme.css",
"./node_modules/primeng/resources/primeng.min.css",
然后您可以简单地在 app.module 中导入 primes 模块并使用 html 标记来呈现组件。但请注意,某些组件需要动画,您应该通过 npm 在您的机器上安装它。
npm install @angular/animations --save
并在应用模块中导入模块:
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
希望对您有所帮助。
将 FormsModule 导入到您导入 DropdownModule 的模块。我遇到了同样的问题,我就是这样解决的。
我想在我的应用程序中使用 this PrimeNG-Dropdown。所以我做了什么:
npm i primeng --save
然后我在从 app.module.ts
导入的文件中添加了 DropdownModule
。之后,我在 html:
<p-dropdown [options]="optionList" [(ngModel)]="selectionString" placeholder="Choose one"></p-dropdown>
在 运行 ng serve
并开始 localhost:4200
我收到以下错误:
./node_modules/primeng/components/multiselect/multiselect.js Module not found: Error: Can't resolve '@angular/cdk/scrolling' in '%projectroot%\node_modules\primeng\components\multiselect'
我还尝试从 imports
-Array 中删除导入,这导致了不同的错误。我究竟做错了什么?我正在使用 Angular 7 顺便说一句。
删除导入时出现以下错误:
Can't bind to 'options' since it isn't a known property of 'p-dropdown'.
1. If 'p-dropdown' is an Angular component and it has 'options' input, then verify that it is part of this module.
2. If 'p-dropdown' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
<p-dropdown [ERROR ->][options]="optionList" [(ngModel)]="selectionString" placeholder="Choose one"></p-dropdown"): ng:///AppModule/ProjectGeneratorComponent.html@13:18
'p-dropdown' is not a known element:
1. If 'p-dropdown' is an Angular component, then verify that it is part of this module.
2. If 'p-dropdown' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
[ERROR ->]<p-dropdown [options]="optionList" [(ngModel)]="selectionString" placeholder="Choose one">"):
您需要安装Angular CDK。 使用 npm install @angular/cdk --save 命令。
然后使用
在appModule中导入多选模块import {MultiSelectModule} from 'primeng/multiselect';
在 appmodule.ts 中尝试:
import {CUSTOM_ELEMENTS_SCHEMA} from "@angular/core";
@NgModule({
...
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
如果你想使用prime NG组件,首先你应该做一些步骤并注意它们已经做好了。首先,您应该通过代码编辑器中的终端安装软件包。你应该安装这些:
npm install primeng --save //install prime in your machine
npm install primeicons --save //install prime icon in your machine
下一步:您应该转到项目中的 angular.json 文件,并在样式部分复制这些行。这些行实际上是 node_module 文件夹中库的路径。但本章中真正重要的是,您使用的 angular 是哪个版本。如果您使用的是 angular 版本 4 或更低版本,您应该将这些路径复制到样式章节:
"../node_modules/primeicons/primeicons.css",
"../node_modules/primeng/resources/themes/nova-light/theme.css",
"../node_modules/primeng/resources/primeng.min.css",
但如果您使用的版本超过 4,则意味着 5、6 或 7,您应该复制这些路径:
"./node_modules/primeicons/primeicons.css",
"./node_modules/primeng/resources/themes/nova-light/theme.css",
"./node_modules/primeng/resources/primeng.min.css",
然后您可以简单地在 app.module 中导入 primes 模块并使用 html 标记来呈现组件。但请注意,某些组件需要动画,您应该通过 npm 在您的机器上安装它。
npm install @angular/animations --save
并在应用模块中导入模块:
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
希望对您有所帮助。
将 FormsModule 导入到您导入 DropdownModule 的模块。我遇到了同样的问题,我就是这样解决的。