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

时间:2018-12-21 16:40:52

标签: angular primeng primeng-dropdowns

我想在我的应用程序中使用this PrimeNG-Dropdown。所以我做了什么:

npm i primeng --save

然后我在DropdownModule的导入中添加了app.module.ts。之后,我在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 btw。

删除导入时,出现以下错误:

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">"): 

3 个答案:

答案 0 :(得分:15)

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

,然后使用

在appModule中导入多选模块
library(tidyverse)
df1 %>%
   group_by(Selection, Filename, Low, High) %>%
   summarise_all(na.omit)

答案 1 :(得分:2)

如果要使用主要的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。如果您使用的是角度版本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';

我希望它能对您有所帮助。

答案 2 :(得分:0)

在appmodule.ts中尝试:

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

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