尝试在应用程序中使用 PrimeNG 中的 p-Dropdown 时出错答案

【问题标题】：Error when trying to use p-Dropdown from PrimeNG in application尝试在应用程序中使用 PrimeNG 中的 p-Dropdown 时出错
【发布时间】：2018-12-21 16:40:51
【问题描述】：

我想在我的应用程序中使用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 模块未找到：错误：无法解析“@angular/cdk/scrolling” '%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">"):

【问题讨论】：

能否也粘贴您在从导入中删除模块后看到的第二个错误？
@mpasko256 我更新了我的帖子

标签： angular primeng primeng-dropdowns

【解决方案1】：

您需要安装 Angular CDK。使用 npm install @angular/cdk --save 命令。

然后在 appModule 中使用导入多选模块

import {MultiSelectModule} from 'primeng/multiselect';

【讨论】：

这行得通，谢谢，但我不明白这是如何解决的。你能解释一下吗？

【解决方案2】：

如果你想使用主要的 NG 组件，首先你应该做一些步骤，并注意它们已经做得很好。首先，您应该通过代码编辑器中的终端安装软件包。你应该安装这些：

    npm install primeng --save   //install prime in your machine

    npm install primeicons --save    //install prime icon in your machine

next ：您应该转到项目中的 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';

希望对你有帮助。

【讨论】：

【解决方案3】：

在 appmodule.ts 中尝试：

import {CUSTOM_ELEMENTS_SCHEMA} from "@angular/core";

@NgModule({
  ...
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

【讨论】：

【解决方案4】：

将 FormsModule 导入到您导入 DropdownModule 的模块。我遇到了同样的问题，我就是这样解决的。

【讨论】：