Ошибка при попытке использовать p-Dropdown из PrimeNG в приложении

Question

Я хочу использовать этот 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'

Iтакже попытался удалить импорт из массива imports, что привело к другой ошибке.Что я делаю неправильно?Я использую 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">"): 

Answer 1

Попробуйте в appmodule.ts:

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

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

Answer 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 и использовать разметку html для визуализации компонентов.но имейте в виду, что некоторые компоненты нуждаются в анимации, которую вы должны установить на свой компьютер через npm.

     npm install @angular/animations --save

и импортировать модули в модуль приложения:

 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

я надеюсь, что это поможет вам,

Answer 3

Вам необходимо установить Angular CDK.используйте команду npm install @ angular / cdk --save .

, а затем импортируйте мультиселектный модуль в appModule, используя

import {MultiSelectModule} from 'primeng/multiselect';