PrimeNG 6 下拉菜单未正确显示答案

【问题标题】：PrimeNG 6 dropdown not correctly showedPrimeNG 6 下拉菜单未正确显示
【发布时间】：2023-12-05 03:14:02
【问题描述】：

我迁移到 PrimeNG 6.1.7，但我遇到了 p-dropdown 问题。这是我在 app.module 中的代码导入（取自一个简单的示例）：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule} from '@angular/platform-browser/animations'; 
import {DropdownModule} from 'primeng/dropdown'; // include this for dropdown support
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    DropdownModule // dropdown support
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas:
        []

})
export class AppModule { }

在 app.component.ts 中：

import { Component, OnInit } from '@angular/core';
import {SelectItem} from 'primeng/api';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  employes: SelectItem[];
  selectedEmploye: any;  

  constructor(){
    this.employes = [
      {label:'Select Employee', value:null},
      {label:'Franc', value:1},
      {label:'Kiran', value:2},
      {label:'John', value:3},
    ];
  }
ngOnInit(){
}
}

在 html 中我有：

<p-dropdown employes="" ngmodel="" options="" selectedemploye=""></p-dropdown>
Selected Employee: {{selectedEmploye }}

我还安装了 primeicons e 在 angular.json 中导入了它：

...
"styles": [
   "src/styles.css",
   "node_modules/primeicons/primeicons.css"
],
...

下拉菜单显示不正确：

有什么建议吗？非常感谢...

【问题讨论】：

标签： angular dropdown primeng

【解决方案1】：

在这种情况下使用primeng下拉菜单的正确html应该是：

<p-dropdown [options]="employes" [(ngModel)]="selectedEmploye"></p-dropdown>

如果在更正之后下拉列表看起来不太好，那么你必须看看你是如何安装primeng库的，以及样式是否正确配置并导入你的index.html (https://www.primefaces.org/primeng/#/setup)

<link rel="stylesheet" type="text/css" href="/node_modules/primeicons/primeicons.css" />
<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/themes/nova-light/theme.css" />
<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/primeng.min.css" />

【讨论】：

谢谢！我在 index.html 中导入了 css 文件，现在正确显示了下拉列表，但未显示单击图标下拉列表。在 F12 检查器中，我看到包含列表的 div 始终显示：none... 怎么可能？
你安装了 npm install @angular/animations --save 吗？并添加 BrowserAnimationsModule?
我解决了！有一个自定义 css 文件覆盖了primeng css...感谢 Octavio Garbarino！
很高兴您能找到上一期，并且我的回答对您有所帮助！不客气！

【解决方案2】：

我在我的 Angular 项目中使用 sass，这就是我导入primeng css 文件的方式，一切正常

style.scss

@import "primeicons/primeicons.css";
@import "primeng/resources/themes/nova-dark/theme.css";
@import "primeng/resources/primeng.min.css";

primeicons 是不同的包，所以一定要安装它npm install primeicons --save

【讨论】：

【解决方案3】：

我遇到了同样的问题。请务必通过 npm install 添加必要的依赖项，以及来自 angular core 的浏览器动画模块。也就是说，最终为我解决了这个问题的是，我必须在我的模板代码中设置文档中列出的一些额外的 primeNG 属性，以便自动完成，然后我必须覆盖我的 scss 文件中的默认 primeNG 样式。

下面列出的是模板代码和scss。显然，您需要根据自己想要的样式进行自定义，但这对我有用。

PrimeNG 自动完成模板代码

 <p-autoComplete name="p-autoComplete" [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" class="p-autocomplete"
      [suggestions]="listAuthors" (completeMethod)="filterAuthors($event)" [size]="40"
      field= "author" placeholder="Search Quotes" [dropdown]="true" [minLength]="1" [autoHighlight] = "true"
      [dropdown]="true" [autofocus]= "true" [style]="{'text-transform': 'uppercase'}"
      scrollable="true">
  </p-autoComplete>

scss

.ui-autocomplete-dd .ui-autocomplete-dropdown.ui-corner-all{
  position:absolute;
  transform: translateX(-100%);
}

.ui-autocomplete{
  width: 100% !important;
}
  .ui-autocomplete-input{
  width: 100% !important;
}

【讨论】：