我迁移到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 }}
我还在angular.json中安装了导入它的primeicons:
...
"styles": [
"src/styles.css",
"node_modules/primeicons/primeicons.css"
],
...
下拉列表未正确显示:qazxsw poi
有什么建议吗?很感谢...
在这种情况下使用primeng下拉列表的正确html应该是:
如果在更正之后下拉列表看起来不太好,那么你必须看看你如何安装primeng库以及样式是否属性配置并导入index.html(<p-dropdown [options]="employes" [(ngModel)]="selectedEmploye"></p-dropdown>
)
https://www.primefaces.org/primeng/#/setup
我在我的角度项目中使用sass,这是我如何导入primeng css文件的每一件工作正常
style.scss
<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" />
primeicons是不同的包,所以一定要安装它
@import "primeicons/primeicons.css"; @import "primeng/resources/themes/nova-dark/theme.css"; @import "primeng/resources/primeng.min.css";