ガイドに従って: https://www.primefaces.org/primeng/ 上記の詳細な手順に従って、Angular4で使用するPrimeNGをインストールしようとしましたが、エラーが発生しました。
'p-dropdown' is not a known element:
他の投稿で提案されているように、プロジェクトを再構築しようとしましたが、うまくいきませんでした。ヒントはありますか?
ここにすべての詳細があります:
-PrimeNgのインストール
npm install primeng --save
-ファイル:testdropdown.component.html
<p-dropdown [options]="cities" [(ngModel)]="selectedCity"></p-dropdown>
-ファイル:testdropdown.component.ts
import { DropdownModule } from 'primeng/primeng';
import { Component, OnInit } from '@angular/core';
import { SelectItem } from 'primeng/primeng';
@Component({
selector: 'app-testdropdown',
templateUrl: './testdropdown.component.html',
styleUrls: ['./testdropdown.component.css']
})
export class TestdropdownComponent implements OnInit {
cities: SelectItem[];
selectedCity: string;
constructor() {
this.cities = [];
this.cities.Push({ label: 'Select City', value: null });
this.cities.Push({ label: 'New York', value: { id: 1, name: 'New York', code: 'NY' } });
this.cities.Push({ label: 'Rome', value: { id: 2, name: 'Rome', code: 'RM' } });
}
ngOnInit() {
}
}
-エラー:
VM1128:185 [CodeLive] HTTP detected: Connecting using WS
zone.js:630 Unhandled Promise rejection: Template parse errors:
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]="cities" [(ngModel)]="selectedCity"></p-dropdown>
"): ng:///AppModule/TestdropdownComponent.html@0:12
'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]="cities" [(ngModel)]="selectedCity"></p-dropdown>
コンポーネントを宣言するモジュールにドロップダウンモジュールをインポートします。
import {DropdownModule} from 'primeng/primeng';
@NgModule({
imports: [
DropdownModule
],
declarations: [TestdropdownComponent ]
})
export class myModule { }
それでもこの問題が解決しない場合は、もう1つテストする必要があるかもしれません。つまり、「FormsModule」がインポートされているかどうか、インポートされていない場合は、それを試してください。
import { FormsModule } from '@angular/forms';
import { DropdownModule } from 'primeng/primeng';
@NgModule({
imports: [
DropdownModule,
FormsModule
],
これで問題が解決するはずです。
アプリモジュールまたはDropdownModule
が宣言されているモジュールのimports
セクションにTestdropdownComponent
を追加する必要があります。
Root module file like: app.module.ts. Added something like that.
インポート{DropdownModule、AccordionModule、SharedModule、ButtonModule、PanelModule、RadioButtonModule、MessagesModule、KeyFilterModule、FieldsetModule、MessageModule、CalendarModule} from 'primeng/primeng';
@NgModule({
imports: [
DropdownModule,
BrowserModule,
BrowserAnimationsModule,
FormsModule,
AccordionModule,
PanelModule,
ButtonModule,
RadioButtonModule,
TableModule,
HttpClientModule,
ReactiveFormsModule,
SharedModule,
MessagesModule,
KeyFilterModule,
FieldsetModule,
CalendarModule,
MessageModule
],
declarations: [TestdropdownComponent ]
})
export class myModule { }