primeng 下拉组件错误（'p-dropdown' 不是已知元素）答案

【问题标题】：primeng dropdown component error ('p-dropdown' is not a known element)primeng 下拉组件错误（'p-dropdown' 不是已知元素）
【发布时间】：2017-11-03 15:17:45
【问题描述】：

跟随指南：https://www.primefaces.org/primeng/ 我尝试按照上面详述的步骤安装 PrimeNG 以与 Angular4 一起使用，但出现错误：

'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>

【问题讨论】：

标签： angular dropdown primeng

【解决方案1】：

Root module file like: app.module.ts. Added something like that.

导入 {DropdownModule,AccordionModule,SharedModule, 按钮模块，面板模块，单选按钮模块，消息模块，关键过滤器模块，字段集模块，消息模块， CalendarModule} 来自 '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 { }

【讨论】：

【解决方案2】：

如果这个问题仍然存在，你可能需要再测试一件事，即“FormsModule”是否被导入，如果没有导入并尝试，

import { FormsModule } from '@angular/forms';
import { DropdownModule } from 'primeng/primeng';

@NgModule({
  imports: [
    DropdownModule,
    FormsModule
  ],

这应该可以解决问题。

【讨论】：

你拯救了我的一天。 :thumbup:
没错，它也需要 FormsModule ！:)
你是怎么知道的？这正是我的问题所在，但错误消息抱怨If 'p-dropdown' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.
自primeng早期版本以来，我一直在广泛研究primeng，当我尝试导入组件时，我经常遇到这个问题。我没有深入研究这个错误，但我的理解是，在引导程序中，如果您不导入/链接 jquery，下拉菜单将不起作用。 FormsModule 可能在内部使用 jquery。

【解决方案3】：

在声明组件的模块中导入下拉模块。

import {DropdownModule} from 'primeng/primeng';

@NgModule({
  imports: [
   DropdownModule
  ],
  declarations: [TestdropdownComponent ]

})
export class myModule { }

【讨论】：

在我的情况下，导入 DropdownModule 是不够的，请查看下面的@Karthik H 答案。

【解决方案4】：

您必须在应用模块或声明TestdropdownComponent 的模块的imports 部分添加DropdownModule。

【讨论】：

谢谢，这解决了我的问题。我忘记将它包含在导入的模块中。