PrimeNG beta 15 Angular 2 DataTable无法使用样式呈现 [英] PrimeNG beta 15 Angular 2 DataTable not rendering with styling

问题描述

我在获取PrimeNG DataTable在我的Web应用程序上正确呈现时遇到问题.当前，显示如下:

I'm having a problem getting PrimeNG DataTable to render properly on my web app. Currently, the display looks like this...

在我的package.json依赖项部分中，像这样

in my package.json dependencies section looks like this

"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文件的摘录

Excerpt from my systemjs.config.js file

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文件

app.module.ts file

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'
    ]
})

好像我正在查看正在加载的样式表(下面的控制台输出)

It looks like I'm seeing the stylesheets being loaded (console output below)

有没有想到为什么输出看起来没有格式却没有应用样式?

Any thoughts as to why the output looks unformatted with no styling applied?

我尝试降级到Angular2 RC 6，但结果相同.不知道我在想什么.我可以在Angular2发行版中使用最新版本的PrimeNG吗?

I tried downgrading to Angular2 RC 6 but it had the same results. Not sure what I'm missing. Can I use the latest version of PrimeNG with the release of Angular2?

推荐答案

我需要从外部(布局)页面加载css文件，并且一切正常.由于某些原因，我无法利用Component的styleUrls数组.

I needed to load the css files from an outer (Layout) page and it all worked. For some reason I couldn't make use of the styleUrls array of the Component.

<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" />

这篇关于PrimeNG beta 15 Angular 2 DataTable无法使用样式呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！