angular - Css 未应用于 Prime Ng 数据表

Question

我正在使用 angular cli 构建一个 angular2 prime ng 应用程序。当我尝试使用 primeNg datable 时，Css 没有正确应用到它。我在我的 app.module 中包含了必要的依赖项，

import {DataTableModule,SharedModule} from 'primeng/primeng';

@NgModule({
  imports: [
 BrowserModule,HttpModule,FormsModule,DataTableModule,SharedModule
  ],
  declarations: [
  ListingComponent
  ],
  exports:[
  ListingComponent
  ],
  providers: [
    NewHireListingService
  ]
})
export class ListingModule {}

我还在 angular-cli.json 中包含了 Prime ng 样式，

"styles": [
    "styles.css",
    "../node_modules/font-awesome/css/font-awesome.css",
    "../node_modules/primeng/resources/themes/omega/theme.css" , // or whatever theme you prefer
    "../node_modules/primeng/resources/primeng.css"
],

我的数据表代码如下，

<p-dataTable [value]="List">
    <p-column field="firstName" header="FirstName"></p-column>
    <p-column field="lastName" header="LastName"></p-column>
    <p-column field="employee_type" header="EmployeeType"></p-column>
    <p-column field="hire_type" header="HireType"></p-column>
    <p-column field="location" header="Location"></p-column>
    <p-column field="hireDate" header="HireDate"></p-column>
</p-dataTable>

但是 css 正在部分应用，谁能告诉我我错过了什么。提前致谢。

Css 得到部分应用

Answer 1

包.json

"primeng": "^4.1.3"

.angular-cli.json

"styles": [
      "../node_modules/primeng/resources/themes/omega/theme.css",
      "../node_modules/primeng/resources/primeng.min.css"
    ]

模块.ts

import { DataTableModule } from 'primeng/primeng';

imports: [ DataTableModule ]

Answer 2

删除并重新安装您的 node-modules 文件，并检查 Angular、Primeng 和 node.js 版本是否兼容。