PrimeNG数据表在Angular 2应用程序中不显示

问题描述：

我正在使用Visual Studio 2015解决方案中的typescript使用Angular 2应用程序。我已阅读PrimeNG网站中的数据表的文档，但不明白为什么我已经实现的数据表没有显示。有人可以帮忙吗？PrimeNG数据表在Angular 2应用程序中不显示

风险list.component.ts

import { Component } from '@angular/core' 

    @Component({ 
      selector: 'rm-risks', 
      templateUrl: 'app/risks/risk-list.component.html' 
     }) 

    export class RiskListComponent { 
     pageTitle: string = 'Risk List'; 
     risks: any[] = [ 
      { 
       "riskId": 1, 
       "reference": "HISXX336", 
       "insuredName": "sdsdsdsdsd", 
       "inceptionDate": "March 19, 2016", 
       "riskType": "Test1", 
       "status": "Indication", 
       "grossPremium": "100", 
       "allocatedTo": "XYZ User", 
       "allocatedCompany": "XYZ" 
      }, 
      { 
       "riskId": 2, 
       "reference": "HIXXXXX0", 
       "insuredName": "fgfgfgfgfg", 
       "inceptionDate": "April 25, 2016", 
       "riskType": "Test2", 
       "status": "Indication", 
       "grossPremium": "312.22", 
       "allocatedTo": "PQR User", 
       "allocatedCompany": "PQR" 
      } 


     ];

风险list.component.html

<h3 class="first">{{pageTitle}}</h3> 

    <p-dataTable [value]="risks" [rows]="10" [paginator]="true" [pageLinks]="3" [rowsPerPageOptions]="[5,10,20]"> 
     <p-column field="reference" header="Reference"></p-column> 
     <p-column field="insuredName" header="Insured Name"></p-column> 
     <p-column field="inceptionDate" header="Inception Date"></p-column> 
     <p-column field="riskType" header="Risk Type"></p-column> 
     <p-column field="status" header="Status"></p-column> 
     <p-column field="grossPremium" header="Gross Premium"></p-column> 
     <p-column field="allocatedTo" header="Allocated To"></p-column> 
     <p-column field="allocatedCompany" header="Allocated Company"></p-column> 
    </p-dataTable>

app.component.ts

import { Component } from '@angular/core'; 
import { RiskListComponent } from './risks/risk-list.component'; 
import {DataTable} from 'primeng/primeng'; 
import {Column} from 'primeng/primeng'; 

@Component({ 
    selector: 'my-app', 
    providers: [], 
    template: ` 
    <div> 
     <h1>{{pageTitle}}</h1> 
      <rm-risks> </rm-risks> 
    </div> 
    `, 
    directives: [RiskListComponent] 

}) 

export class AppComponent { 
    pageTitle: string = 'Test UK Trader'; 
}

的index.html

<!DOCTYPE html> 
<html> 

<head> 
    <title>Angular 2 Application</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link href="app/app.component.css" rel="stylesheet" /> 


    <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> 


    <!-- 1. Load libraries --> 
    <!-- Polyfill(s) for older browsers --> 
    <script src="https://npmcdn.com/[email protected]/es6-shim.min.js"></script> 

    <script src="https://npmcdn.com/[email protected]?main=browser"></script> 
    <script src="https://npmcdn.com/[email protected]"></script> 
    <script src="https://npmcdn.com/[email protected]/dist/system.src.js"></script> 

    <!-- 2. Configure SystemJS --> 
    <script src="systemjs.config.js"></script> 
    <script> 
     System.import('app').catch(function(err){ console.error(err); }); 
    </script> 
</head> 

<body> 
    <my-app>Loading..</my-app> 
</body> 

</html>

答

我认为你需要添加数据表和列的指示;

@Component({ 
     selector: 'rm-risks', 
     directives: [DataTable,Column], 
     templateUrl: 'app/risks/risk-list.component.html' 
    })

我已经试过这个。我收到错误消息无法加载资源：http：// localhost：3622/node_modules/primeng/primeng服务器响应状态为404（Not Found） – Tom

我可以在我的node_modules文件夹下看到primeng – Tom

@Tom：运气好吗？ – xtras

答

我通过在我的app.module.ts文件中添加下面的导入语句来显示我的。 Prime文档没有显示那个部分，但是我在某个地方找到了一个工作示例。

import {DataTableModule} from "primeng/primeng";

PrimeNG数据表在Angular 2应用程序中不显示

相关推荐