我迁移到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-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,并将其导入了angular.json:
...
"styles": [
"src/styles.css",
"node_modules/primeicons/primeicons.css"
],
...
有什么建议吗? 非常感谢...
答案 0 :(得分: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" />
答案 1 :(得分:0)
我在我的有角度的项目中使用了sass,这就是我如何导入primeng css文件的所有方法
style.scss
::
primeicons是不同的软件包,因此请确保安装
@import "primeicons/primeicons.css"; @import "primeng/resources/themes/nova-dark/theme.css"; @import "primeng/resources/primeng.min.css";
答案 2 :(得分:0)
我遇到了同样的问题。确保通过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;
}