PrimeNG beta 15角度2數據表不能與樣式呈現

我有一個問題，PrimeNG DataTable正確呈現在我的web應用程序。目前，顯示器看起來像這樣...PrimeNG beta 15角度2數據表不能與樣式呈現

在我的package.json依賴性部分看起來像這樣

"dependencies": { 
    "@angular/common": "2.0.0", 
    "@angular/compiler": "2.0.0", 
    "@angular/core": "2.0.0", 
    "@angular/forms": "2.0.0", 
    "@angular/http": "2.0.0", 
    "@angular/platform-browser": "2.0.0", 
    "@angular/platform-browser-dynamic": "2.0.0", 
    "@angular/router": "3.0.0", 
    "@angular/upgrade": "2.0.0", 
    "@angular2-material/button": "^2.0.0-alpha.8-2", 
    "@angular2-material/core": "^2.0.0-alpha.8-2", 
    "@angular2-material/input": "^2.0.0-alpha.8-2", 
    "@angular2-material/card": "^2.0.0-alpha.8-2", 
    "@angular2-material/toolbar": "^2.0.0-alpha.8-2", 
    "core-js": "^2.4.1", 
    "hammerjs": "^2.0.8", 
    "reflect-metadata": "^0.1.8", 
    "rxjs": "5.0.0-beta.12", 
    "systemjs": "^0.19.38", 
    "zone.js": "^0.6.23", 
    "primeng": "^1.0.0-beta.15" 
    },

摘自我systemjs.config.js文件

var map = { 
     'app': 'app', // 'dist', 
     '@angular': 'lib/@angular', 
     'rxjs': 'lib/rxjs', 
     '@angular2-material': 'lib/@angular2-material', 
     'primeng': 'lib/primeng' 
    }; 
    // packages tells the System loader how to load when no filename and/or no extension 
    var packages = { 
     'app': { main: 'main.js', defaultExtension: 'js' }, 
     'rxjs': { defaultExtension: 'js' }, 
     '@angular2-material/core': { main: 'core.umd.js', defaultExtension: 'js' }, 
     '@angular2-material/button': { main: 'button.umd.js', defaultExtension: 'js' }, 
     '@angular2-material/input': { main: 'input.umd.js', defaultExtension: 'js' }, 
     '@angular2-material/card': { main: 'card.umd.js', defaultExtension: 'js' }, 
     '@angular2-material/toolbar': { main: 'toolbar.umd.js', defaultExtension: 'js' }, 
     'primeng': { defaultExtension: 'js' } 
    };

app.module.ts文件

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 

import { AppComponent } from './app.component'; 

import { LoginFormComponent } from './login-form.component'; 
import { OrganizationGroupComponent } from './organization-group/organization-group.component'; 
import { HomeComponent } from './home.component'; 
import { LoginService } from './login.service'; 
import { OrganizationGroupService } from './organization-group/organization-group.service'; 
import { AuthGuard } from './authguard'; 
import { routing } from './app.routing'; 
import { MdButtonModule } from '@angular2-material/button'; 
import { MdInputModule } from '@angular2-material/input'; 
import { MdCardModule } from '@angular2-material/card'; 
import { MdToolbarModule } from '@angular2-material/toolbar'; 
import { DataTableModule } from 'primeng/primeng'; 



@NgModule({ 
    imports: [ 
     BrowserModule, 
     FormsModule, 
     HttpModule, 
     routing, 
     MdButtonModule, 
     MdInputModule, 
     MdCardModule, 
     MdToolbarModule, 
     DataTableModule 
    ], 
    declarations: [ 
     AppComponent, 
     LoginFormComponent, 
     HomeComponent, 
     OrganizationGroupComponent 
    ], 
    providers: [ 
     LoginService, 
     AuthGuard, 
     OrganizationGroupService 
    ], 
    bootstrap: [AppComponent] 
}) 

export class AppModule { }

我的HTML文件

<div> 
    <p-dataTable [value]="organizationGroups" [lazy]="true" [rows]="10" [paginator]="true" 
       [totalRecords]="totalRecords" (onLazyLoad)="loadOrganizationGroupsLazy($event)"> 
     <header>List of OrganizationGroups</header> 
     <p-column field="Id" header="Id"></p-column> 
     <p-column field="Name" header="Name"></p-column> 
    </p-dataTable> 
</div>

我的組件聲明

@Component({ 
    selector: 'organization-group', 
    templateUrl: 'app/organization-group/organization-group.html', 
    styleUrls: [ 
     'lib/primeng/resources/themes/omega/theme.css', 
     'lib/primeng/resources/primeng.min.css', 
     'app/font-awesome.min.css' 
    ] 
})

它看起來像我看到的樣式表被加載（以下控制檯輸出）

任何想法，爲什麼輸出看起來沒有格式化，沒有應用樣式？

我試圖降級到Angular2 RC 6，但它有相同的結果。不知道我錯過了什麼。我可以在發佈Angular2時使用最新版本的PrimeNG嗎？

來源

2016-09-17 mcbowes

我需要從外部（佈局）頁面加載CSS文件和它的所有工作。出於某種原因，我無法使用Component的styleUrls數組。

<link rel="stylesheet" href="lib/primeng/resources/themes/omega/theme.css" /> 
<link rel="stylesheet" href="lib/primeng/resources/primeng.min.css" /> 
<link rel="stylesheet" href="app/font-awesome.min.css" />

來源

2016-09-18 02:27:32 mcbowes

安裝PrimeUI和下面的CSS添加到您的index.html：

<link rel="stylesheet" type="text/css" href="node_modules/primeui/themes/omega/theme.css" /> 
<link rel="stylesheet" type="text/css" href="node_modules/primeui/primeui-ng-all.min.css" />

來源

2016-09-17 21:18:14

鑑於他們顯然正在加載這些樣式表，你認爲這有助於嗎？這些引用在生產中不起作用，其中也不存在'node_modules /'。 – jonrsharpe

PrimeNG beta 15角度2數據表不能與樣式呈現

回答

相關問題