Question

我在使用PrimeNG DataTable在我的网络应用上正确呈现时遇到问题。目前，显示器看起来像这样......

我的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吗？

Answer 1

安装PrimeUI并将以下CSS添加到clock_surf.fill(clearcolor, clock_surf.get_rect())：

index.html

Answer 2

我需要从外部（布局）页面加载css文件，这一切都有效。由于某种原因，我无法使用Component的styleUrls数组。

hello-domain serial_

PrimeNG beta 15 Angular 2 DataTable无法使用样式进行渲染

2 个答案: