web-dev-qa-db-ja.com

アプリケーションでPrimeNGからp-Dropdownを使用しようとするとエラーが発生する

アプリケーションで 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：Ca n't resolve '@ angular/cdk/scrolling' in '％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">"):
angularprimengprimeng-dropdowns
3
Rüdiger

プライム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",

次に、primesモジュールをapp.moduleにインポートし、htmlマークアップを使用してコンポーネントをレンダリングします。ただし、一部のコンポーネントにはアニメーションが必要であり、npmを介してマシンにインストールする必要があることに注意してください。

     npm install @angular/animations --save

appモジュールにモジュールをインポートします。

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

お役に立てば幸いです。

4
Seyed-Amir-Mehrizi

Angular CDKをインストールする必要があります。npm install @ angular/cdk --saveコマンドを使用してください。

次に、次のコマンドを使用して、複数選択モジュールをappModuleにインポートします。

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

Appmodule.tsで試してください：

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

@NgModule({
  ...
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
0
Héctor Cervera Panella