web-dev-qa-db-fra.com

Erreur lors de la tentative d'utilisation de p-Dropdown de PrimeNG dans l'application

Je veux utiliser ce PrimeNG-Dropdown dans mon application. Alors ce que j'ai fait:

npm i primeng --save

J'ai ensuite ajouté le DropdownModule dans mes importations depuis app.module.ts. Par la suite, j'ai inclus le code suivant dans mon html:

<p-dropdown [options]="optionList" [(ngModel)]="selectionString" placeholder="Choose one"></p-dropdown>

En cours d'exécution ng serve et démarrage localhost:4200 J'obtiens l'erreur suivante:

./node_modules/primeng/components/multiselect/multiselect.js Module introuvable: Erreur: impossible de résoudre '@ angular/cdk/scrolling' dans '% projectroot%\node_modules\primeng\components\multiselect'

J'ai également essayé de supprimer l'importation du tableau imports-, ce qui a entraîné une erreur différente. Qu'est-ce que je fais mal? J'utilise Angular 7 btw.

Lors de la suppression de l'importation, j'obtiens l'erreur suivante:

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
Rüdiger

si vous voulez utiliser le composant prime NG, vous devez d'abord faire quelques étapes et faire attention à ce qu'il soit bien fait. vous devez d'abord installer les packages via le terminal dans votre éditeur de code. vous devrait les installer:

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

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

ensuite: vous devez aller dans le fichier angular.json dans votre projet et dans la section style, vous devez copier ces lignes. ces lignes sont en fait le chemin des bibliothèques dans votre dossier node_module. mais quelque chose qui est vraiment important dans ce chapitre est la version de angular que vous utilisez. si vous utilisez angular version 4 et inférieure à celle que vous devriez copiez ces chemins dans le chapitre de style:

"../node_modules/primeicons/primeicons.css",
"../node_modules/primeng/resources/themes/nova-light/theme.css",
"../node_modules/primeng/resources/primeng.min.css",

mais si vous utilisez une version supérieure à 4, cela signifie 5 ou 6 ou 7, vous devez copier ces chemins:

  "./node_modules/primeicons/primeicons.css",
  "./node_modules/primeng/resources/themes/nova-light/theme.css",
  "./node_modules/primeng/resources/primeng.min.css",

alors vous pouvez simplement importer le module primes dans votre app.module et utiliser le balisage html pour rendre les composants. mais sachez que certains composants nécessitent des animations que vous devez installer sur votre machine via npm.

     npm install @angular/animations --save

et importer des modules dans le module d'application:

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

j'espère que ça t'aide .

4
Seyed-Amir-Mehrizi

Vous devez installer la commande Angular CDK. Use npm install @ angular/cdk --save.

puis importez le module de sélection multiple dans appModule en utilisant

import {MultiSelectModule} from 'primeng/multiselect';
18
Parth Savadiya

Essayez dans appmodule.ts:

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

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