Angular，PrimeNG - p-dropdown意外渲染
Angular是一种用于构建Web应用程序的开源框架，它由Google开发和维护。它使用TypeScript语言，结合HTML和CSS，用于构建响应式和可扩展的单页面应用。
PrimeNG是一个开源的基于Angular的UI组件库，提供了丰富的可重用UI组件，其中包括p-dropdown（下拉框）。p-dropdown用于在页面上呈现一个下拉框，并允许用户从预定义的选项中进行选择。
意外渲染指的是p-dropdown组件在页面上渲染时出现了不符合预期的问题。这可能包括下拉框显示在错误的位置、样式错乱、选项列表无法显示等。
解决p-dropdown意外渲染的问题可以采取以下步骤：
- 检查HTML结构和样式：确保p-dropdown组件的HTML结构正确，包括正确的父元素、类和属性设置。同时，检查样式是否与预期一致，可能需要调整CSS样式以适应页面布局和主题。
- 检查数据绑定和选项设置：确保p-dropdown正确绑定到数据模型，并且选项列表中包含正确的选项。可以使用Angular的数据绑定语法和循环指令来实现这一点。
- 更新依赖库版本：检查Angular和PrimeNG的版本是否兼容，并确保使用最新版本。有时，意外渲染问题可能是由于依赖库之间的不兼容性引起的，通过更新版本可以解决这些问题。
- 查找和调试错误：使用浏览器的开发者工具进行调试，检查控制台输出和网络请求是否存在错误或警告信息。这有助于找到潜在的问题并定位错误的原因。
腾讯云提供了一系列与Angular和前端开发相关的产品和服务，例如静态网站托管、云函数、CDN加速等。您可以访问腾讯云官方网站（https://cloud.tencent.com/）获取更多详细信息和产品介绍。请注意，本答案中不提供具体链接地址。
相关·内容
按照指南：，我尝试安装与Angular4一起使用的PrimeNG，遵循上面详述的步骤，但是我得到了错误：
'p-dropdown' is not a known element:
我试图重建这些项目，就像其他帖子中所建议的那样，但对我来说没有用。有什么暗示吗？
以下是所有细节：
- PrimeNg安装
npm install primeng --save
-档案: testdropdown.component.html
<p-dropdown [options]="cities" [(ngModel)]="selectedCity">
浏览 10提问于2017-06-02得票数 10
回答已采纳
我是新的Angular 2和primeNG，我正在做的项目是配置了webpack服务器的，现在我想为我的项目使用primeng，我该怎么做呢？
我使用npm安装primeng，并在appmodule中导入primeng模块，然后尝试使用
<p-dropdown [options]="cities" [(ngModel)]="selectedCity"></p-dropdown>
它显示的错误如下
./~/primeng/components/accordion/accordion.js
Module not found: Error: C
浏览 0提问于2017-04-06得票数 1
我在我的angular应用程序版本6中使用primeng版本6.1.0。我面临着一个问题，我想要在关闭p-dropdown时触发事件，不是通过选择任何项目，而是通过在p-dropdown列表之外单击来触发事件。我已经使用了点击事件，所以，我想要另一个工作，以激发和事件关闭后的primeng下拉。
我尝试了onHide event by primeng p-dropdown文档
在html中：
<p-dropdown (click)="clickToDisable()" [options]="activeCustomerStatus" [(ngModel)]
浏览 40提问于2019-08-13得票数 0
我想在我的应用程序中使用。所以我所做的：
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/
浏览 0提问于2018-12-21得票数 4
回答已采纳
我有一个带有PrimeNg库的Angular项目，我想使用p-dropdown组件，我将其导入到app.module文件中，如下所示：
import { DropdownModule } from "primeng/dropdown";
imports: [
DropdownModule,
],
当我在html文件上使用它时：
<div class="charts-dropdown">
<p-dropdown [options]="chartsDropdownLookup" [(ngModel)]=&#
浏览 31提问于2020-05-21得票数 0
与标题一样，PrimeNg下拉元素的行为如下所示:它显示下拉框旁边的占位符文本，并在可编辑的第二个框中显示它。我正在寻找一种方法，使它的行为像一个正常的下拉菜单。下面的代码和图像。
Html-代码：
<h5>PrimeNG dropdown component</h5>
<div>
<p-dropdown
[options]="lang"
[editable]="true"
placeholder="Select a Language"
[showClear]="
浏览 8提问于2022-02-09得票数 0
回答已采纳
1回答
我使用DropdownModule创建了一个下拉列表。下拉列表将呈现，但并不像预期的那样，如下所示：
打字脚本
export const countryListOfObjects: SelectItem[]
= [
{ label: 'Select a country', value: null },
//A
{ label: 'Albania', value: { name: 'Albania', code: '' } },
{ label: 'Algeria', value:
浏览 0提问于2016-09-18得票数 0
我尝试在页面初始化时禁用PrimeNg下拉菜单，如下所示
this.searchForm = this.formBuilder.group({
dropdown: [{value: '', disabled: true}]
});
但这会给出一个浏览器加载错误，如下所示：
this.valueAccessor.setDisabledState is not a function
我在超文本标记语言中使用PrimeNG下拉菜单，如下所示：
<p-dropdown [options]="[{label: 'A
浏览 4提问于2016-09-09得票数 3
回答已采纳
我的应用程序使用PrimeNG & Angular2。
我有一个组件，它应该显示可选择主题的下拉菜单。我已经跟踪了文档，据我所见，我已经以同样的方式构建了所有的东西。但我总是收到错误“没有值访问器表示‘”
theme.component.ts：
import { Component, OnInit, Input } from '@angular/core'
import { Dropdown, SelectItem} from 'primeng/primeng';
@Component({
selector: 'my-themes'
浏览 1提问于2016-07-21得票数 8
回答已采纳
3回答
我迁移到了PrimeNG 6.1.7，并遇到了p下拉列表的问题。这是我在app.module中的代码导入(取自一个简单的示例)：
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule} from '@angular/platform-
浏览 1提问于2018-11-28得票数 1
回答已采纳
在尝试将primeNG下拉列表添加到userform.component.ts时，获得此错误时，我引用了此方法，但没有效果，因为我已经完成了以下修复：
Uncaught Error: 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, t
浏览 6提问于2017-09-23得票数 4
回答已采纳
如何在Ag-Grid单元格中包含基本的HTML元素。
下面是我在MyComponent.html中的html PrimeNg p-dropdown
<p-dropdown [options]="cars" [(ngModel)]="selectedCar" (click)="doSomething()" [style]="{'width':'150px'}"></p-dropdown>
和ag-grid现在用于在其中一个单元格中包含上述p-dropdown
<ag-gr
浏览 1提问于2020-07-27得票数 2
我一直在使用PrimeNG作为我正在开发的Angular TypeScript应用程序的UI库，我在自定义PrimeNG下拉菜单的字体大小样式和下拉触发器图标样式时遇到了麻烦。似乎PrimeNG的样式文档在如何定制它方面相当含糊。 无论我如何尝试调整它，字体大小在下拉列表中都不会改变。我不确定是否应该使用html中的内联样式( TypeScript中的属性)，还是应该覆盖PrimeNG CSS样式来实现这一点。这也适用于下拉触发器图标。 下面是我的HTML、TypeScript和CSS。 <p-dropdown [options]="heights" [style]=&
浏览 10提问于2020-12-15得票数 0
使用以下配置：
"@angular/cli": "^7.3.9", "primeng": "7.0.5",
我有一个使用PrimeNG的<p-table>的页面，它是scrollable，并且scrollHeight设置为100%。此表包装在具有固定高度300px的div中。
创建Stackblitz：
每一行都有一个p-dropdown。在顶行中，当dropdown打开时，它会向下打开，这是可以接受的；但当最后一行中的dropdown打开时，它也会向下打开，但应该向上打开，这是p-dropdown的默认行为。
任何建
浏览 42提问于2019-10-21得票数 1
回答已采纳
1回答
我一直在关注和问题，但它们的问题与我的略有不同。事实上，第一个问题甚至没有正确的答案。尽管正确地跟踪了原始文档中的所有内容，但我还是得到了这个错误：
这是我的密码。
app.module.ts
//...
import {DropdownModule} from 'primeng/dropdown';
@NgModule({
declarations: [
AppComponent,
...
],
imports: [
BrowserModule,
BrowserAnimationsModule,
...,
浏览 2提问于2019-11-10得票数 1
回答已采纳
1回答
我正在使用angular 2。我已经创建了一个基于下拉选择的表。我能够在单击按钮时生成新的行(克隆行)。如何禁用上一行。所以值只会在当前新生成的row.how中改变，我能做到这一点吗，任何替代方案都是提前welcome.thanks。
import { NgModule } from '@angular/core';
import { Component, OnInit } from '@angular/core';
import {SelectItem} from 'primeng/primeng';
import { Forms
浏览 13提问于2017-08-16得票数 1
我在我的Angular应用程序中使用了PrimeNG。我打算使用p-dropdown组件，但它在我的组件中呈现得非常奇怪。 ? 这看起来与他们在文档中演示的完全不同。 这是package.json。(也许Bootstrap和PrimeNG版本控制未对齐，或者类似的情况？)： {
"name": "soar",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng
浏览 33提问于2019-06-30得票数 2
我正在创建一个基于下拉选择的表格。我能够显示单个选择的数据。我想为“新按钮”创建一个函数，它将添加一行，所选值将显示在新生成的行中。我如何使用javascript或angular 2.p.s.I才刚刚起步。提前谢谢。
import { NgModule } from '@angular/core';
import { Component, OnInit } from '@angular/core';
import {SelectItem} from 'primeng/primeng';
import { FormsModule }
浏览 1提问于2017-08-11得票数 0
P-下拉菜单上的resetFilterOnHide="true“不起作用。如果我在筛选栏中键入内容，在下拉列表之外单击将其关闭，然后再次输入下拉列表，我输入的筛选器仍然存在。 我在angular 4应用程序中使用primeng 5.2.7。不幸的是，我不能将这些升级到最新版本，因为我在primeng的p-dropdown组件上遇到了一些问题。根据https://github.com/primefaces/primeng/issues/5915的说法，该问题已在primeng 6.0.1中记录和修复。 在primeng 5.2.7中有解决这个问题的方法吗？
浏览 24提问于2019-04-11得票数 0
我正在使用Angular2 rc.4和PrimeNg 1.0.0.beta.9，我得到了这个错误：
platform-browser.umd.js:1900 Error: No value accessor for ''
at new BaseException (common.umd.js:836)
at _throwError (common.umd.js:3516)
at setUpControl (common.umd.js:3493)
at NgModel.ngOnChanges (common.umd.js:4103)
at
浏览 7提问于2016-07-01得票数 1
回答已采纳
1回答
我在我的应用程序中使用p-dropdown，并注意到在升级到PrimeNG 9和Angular 10之后，p-dropdown不再将自定义值作为默认值。相反，它将选项列表中出现的第一个值作为默认值。此外，标签现在只填充了下拉列表的一半，而重置只是空的。我该如何解决这个问题呢？提前谢谢。
这是我的模板：
<div fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="10px">
<p-dropdown [options]="cityList" too
浏览 6提问于2020-11-19得票数 3
当试图在浏览器中显示元素时，没有显示任何内容(白色屏幕)。当PrimeNg不在html-File中时，将显示另一个PrimeNg元素p-下拉列表，如果两者都存在，则两者都变得不可见。在检查Firefox开发工具检查器中的元素时，显示该元素的大小为0x19像素。当用高度或最小高度值更改css时，这些值将显示在Firefox中，但元素将保持不可见性。
完整html-代码：
<p-dropdown [options]="cities" [(ngModel)]="selectedCity" optionLabel="name"></p-
浏览 3提问于2022-03-14得票数 0
2回答
我在一个angular2应用程序上工作，我正在为UI元素使用primeng。我在下拉列表中使用了这些选项，这些下拉列表是从API调用动态生成的。现在，当我单击submit按钮时，我希望它在提交之前验证表单。因此，我使用“required=”“required”来进行验证。
我看到，如果没有将数据加载到dropdown中，则验证可以正常工作，但当加载数据并填充下拉选项时，primeng验证将中断，并且不会抛出任何消息。
这是我的html代码..
<div method="post" class="content-form">
浏览 2提问于2017-07-14得票数 1
1回答
我正在尝试填充一个有几个PrimeNg下拉列表的表单。为了简单起见，让我使用类似于他们网站上的例子。
<form [formGroup]="myFormGroup">
<p-dropdown [options]="cities" formControlName="selectedCity"></p-dropdown>
</form>
this.cities = [
{name: 'New York', code: 'NY'},
{name: 'Ro
浏览 0提问于2020-05-27得票数 3
回答已采纳
我在angular 5和primeng上工作。我的项目页面有2个p-dropdown，要求是，如果car dropdown中的标签是'Others'，在第二个下拉列表中添加一个名为'No Paint'的选项，如果car下拉标签不是'Ohters'，从第二个下拉列表中删除'No Paint'选项。我陷入了动态添加和删除下拉选项的困境。请任何人指导，下面是我的代码。谢谢 Car: <p-dropdown [options]="cars" [(ngModel)]="selectedCar"
浏览 4提问于2019-01-07得票数 0
回答已采纳
3回答
我在我的angular应用程序中有primeng下拉菜单和一组值。
在视图屏幕中，下拉菜单不显示所选值(保存在db中的值)，而显示'Select‘。
HTML：
<p-dropdown [options]="reasons" [(ngModel)]="selectedReason" (onChange)="getCompleteReason($event)" styleClass="ui-column-filter" filter="true"> </p-dropdown>
浏览 2提问于2018-06-26得票数 3
回答已采纳
对于HTML/CSS来说，我的理解在下面的例子中有一个严重的漏洞。
我建立了一个角度应用程序使用primeng的外观和感觉。我有一个带有HTML的组件，其中包含primeNg元素。
我注意到<p-dropdown [style]="{'width': '100%'}"></p-dropdown>会影响宽度，但是使用<p-dropdown style="width: 100%"></p-dropdown>语法不起作用，我得到了一个错误：
错误状态：ERROR Error: Cannot
浏览 1提问于2019-08-06得票数 0
回答已采纳
1回答
我已经尝试设置PrimeNg到我的角-CLI项目.所以我遵循了如下步骤
npm install primeng --save npm install primeui --save
我需要一滴水，所以我增加了
import { DropdownModule } from 'primeng/primeng';在我的主module.ts文件中，后面跟着imports:[DropdownModule]。
然后将样式添加到.角-cli.json文件中，如下所示
"../node_modules/primeng/resources/themes/omega/theme.scss&#
浏览 4提问于2017-11-26得票数 3
我已经升级了我的角PrimeNG应用程序从v9到11。下拉延迟加载已经停止工作，事件PrimeNG现在不被调用。下面是示例代码
<p-dropdown id="field_branch" name="branch" [options]="branchOptions" formControlName="branchId"
[virtualScroll]="true" [lazy]="true" [rows]="10" (onLazyLoad)="onBranchL
浏览 9提问于2021-03-10得票数 1
2回答
是否有任何方法将PrimeNG下拉图标放置在选择的左侧？
我试过了
<div class="ui-rtl" dir="rtl">
<p-dropdown></p-dropdown>
</div>
但没能正常工作。
还有别的解决办法吗？
浏览 0提问于2018-03-28得票数 2
回答已采纳
1回答
我正在研究PrimeNG组件。但是我对浏览器上的UI显示有问题。
现在，我想显示静态下拉列表。我参考了的资料。下面的代码将显示该组件。
HTML文件
<h3 class="first">Single</h3>
<p-dropdown [options]="cities" [(ngModel)]="selectedCity" placeholder="Select a City"></p-dropdown>
<p>Selected City: {{selectedCity
浏览 1提问于2017-10-03得票数 2
回答已采纳
1回答
免责声明，我对primeng非常陌生。
我有以下组件
import { Component , OnInit} from '@angular/core';
import { TimeRangesService } from './time.range.service';
@Component({
moduleId : module.id,
selector: 'time-range',
templateUrl: './time.range.co
浏览 3提问于2017-07-18得票数 0
回答已采纳
1回答
请告诉我，在哪里可以找到PrimeNG中的事件处理示例。嗯，我不知道写什么代替XXX。
<p-dropdown (onChange)="onChangeCity(XXX)"...></p-dropdown>
...
...
onChangeCity(XXX){
...
}
浏览 8提问于2017-07-11得票数 2
回答已采纳
1回答
我正在尝试在我的Angular 4代码中使用PrimeNg组件。模块被正确导入，但是样式没有被应用。
浏览器控制台正在显示404 error。
我使用了angular-cli来获取项目样板。
我在index.html中使用链接标签包含了样式，如下所示：
<link rel="stylesheet" href="/node_modules/font-awesome/css/font-awesome.min.css" />
<link href="/node_modules/primeng/resources/themes/omega/th
浏览 2提问于2017-09-23得票数 1
我使用Primng和下拉方式从API中获取数据，但是显示对象对象而不是projectName。HTML代码是
<p-dropdown
[options]="projects"
[(ngModel)]="selectedProject"
name="selectedProject"
placeholder="select a Project"
optionLable="projectName"
(onChange)="onChange($event)"
></p-dropd
浏览 6提问于2021-12-09得票数 1
我有一个安装了Angular2套件的PrimeNG应用程序。
我正在尝试实现一个带有primeNG下拉组件的表单。
当我运行应用程序并从列表框中选择一个元素时，问题就会发生。
它不是显示值，而是显示对象对象。
问题所在
html组件
<p-dropdown [options]="listCustomers_itm" placeholder="Selezionare" formControlName="Customer_itm" [(ngModel)]="Customer_itm" filter="filt
浏览 0提问于2017-04-29得票数 2
我需要有下拉列表中的表下拉下拉列的每一行都是从相同的列表(数据库表)我的问题
在更改一个p-dropdown的DropDown值时(比方说在行位置3)，p-table中的所有其他p-dropdown都将更改为该值。我是primeng & angular的新手，也不能弄清楚这个问题。我当前的代码，我卡住了如何继续处理下拉选择，以影响其特定的行
<p-table [value]="signals" [rows]="10" [paginator]="true">
<ng-template pTemplate="
浏览 0提问于2021-04-22得票数 0
我有一个问题，p下拉模块在Primeng和角4。
我已经用循环中的值填充了选项：
for(let i = 1; i <= 20; i++) {
this.iterations = [... this.iterations, { label: i, value: i}]
}
我试图在我的模板中使用它：
<p-dropdown [options]="iterations"></p-dropdown>
问题是下拉列表只显示第一个值(在本例中为'1')。当我检查“迭代”数组或静态设置迭代数组时，问题仍
浏览 3提问于2017-07-04得票数 0
我有一个primeng dropdown组件...
<form [formGroup]="skillsForm">
<p-dropdown [options]="experienceList" optionLabel="name" formControlName="example" ></p-dropdown>
</form>
深入嵌套的表单组和数组，所以我需要使用反应式表单。
我尝试使用以下命令获取选择器的值
skillsForm.value.example
并获取该
浏览 10提问于2018-02-06得票数 2
我试图在ng模板中获取primeng下拉列表的索引值，但它给了我一个空值。这是示例代码
<p-dropdown [options]="cards" [(ngModel)]="selectedCard">
<ng-template let-card let-i="index" pTemplate="item">
<span>{{i}}</span>
</ng-template>
</p-dropdown>
浏览 9提问于2020-08-05得票数 4
回答已采纳
我使用的是PrimeNG Turbotable，我希望在PrimeNG TurboTable的输入模板中集成p-dropdown组件。问题是，当我使用以下代码时，所选元素无法分配给value表。
<ng-template pTemplate="body" let-rowData let-row="rowIndex">
<tr>
<td>{{listRow[row]}}</td>
<ng-container *ngIf="edit">
浏览 1提问于2018-03-29得票数 0
我有使用PrimeNg p下拉列表的组件。
html代码：
<p-dropdown [style]="{'width':'150px'}" [options]="portNames" placeholder="Select a Port">
</p-dropdown>
ts portNames解密：
portNames: string[] =["Port 01","Port 02", "Port 03"];
我的问题是，DropDown不显示值
浏览 0提问于2018-03-20得票数 11
回答已采纳
1回答
我正在尝试显示primeng下拉列表，但该列表根本不显示。我使用的是angular 4.0.2和primeng 4.0.0-rc.3。我确实看到了很多与此相关的报告问题，并尝试了不同的解决方案，但仍然没有看到ll的下拉列表。
html页面
<p-dropdown [options]="archivingGroups"[(ngModel)]="selectedArchivingGroup" ngDefaultControl ></p-dropdown>
组件代码：
import {Component, OnInit} from '
浏览 1提问于2017-05-15得票数 2
我有一种情况是在我的html页面上有5个primeNg的p-dropdown，我想读取所有5个下拉列表中的任何一个p-dropdown事件的值，这样我就可以对所有选定的值应用过滤器来显示数据网格中的数据。我正在尝试模板引用变量，但没有成功 app.component.html <p-table>
<ng-template pTemplate="header">
<tr>
<td>
Compnay Name <p-
浏览 133提问于2021-03-17得票数 0
回答已采纳
1回答
如何在页面刷新后保存和保存PrimeNG下拉项的下拉值？
<p-dropdown [options]="cities2" [(ngModel)]="selectedCity2" optionLabel="name"></p-dropdown>
TypeScript
import {SelectItem} from 'primeng/api';
interface City {
name: string;
code: string;
}
expor
浏览 0提问于2018-05-21得票数 1
回答已采纳
2回答
我在p-table的页脚里有一个p-dropdown。这些都是PrimeNg组件。我注意到下拉列表有时会打开到顶部，在这种情况下，我喜欢这样，我想强制它始终打开到顶部。
在p-dropdown的文档中，我找不到任何有用的东西。我可能有一个CSS选项，我能帮上忙吗？敬请指教。
<p-dropdown [options]="myTypeOptions" [formControlName]="type" appendTo="body" [showClear]="true"></p-dropdown>
浏览 0提问于2019-03-29得票数 0
我使用的是具有PrimeNG和p-dropdown过滤器的标题行，在调用表中的.reset()方法时，需要清除input 和 p-dropdown的筛选值。
正如其他人所指出的()，您可以在input元素上使用[value]，但是似乎没有清除任何非input筛选值的方法。
如何为p-dropdown (和其他非input筛选器类型)重置筛选器值？
浏览 5提问于2020-05-20得票数 1
回答已采纳
2回答
我的应用UI是基于PrimeNG的，我正在处理动态表单，并通过API获得表单字段的配置。我的PrimeNG下拉列表显示了空选项。以下是供参考的图像：
下面是PrimeNG下拉列表的代码：
<p-dropdown *ngIf="field.IsLookup == 'Y'" [options]="field.LookupVal.split('|')"
[id]="field?.ColumnName"
[formControlName]="field?.Column
浏览 0提问于2020-07-15得票数 3
回答已采纳
1回答
我正在使用primeng来设计我的UI。我想要一个下拉菜单看起来像一个按钮，如我的附件所示。有谁能帮助我们实现这一点吗？
下面是我的代码：
<p-dropdown [options]="items" placeholder="SORT BY"></p-dropdown>
谢谢
浏览 0提问于2017-08-24得票数 1
你好，我想让整个tr在我的角度树表内可点击。我使用的是PrimeNG中的treetable。目前，我只能单击按钮来展开我的表行。现在，我希望能够单击整个表行：
<tr>
<td>
<a href="#" [pRowToggler]="rowData">
<i [ngClass]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></i>
浏览 0提问于2018-10-16得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
