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>

來源

2016-05-23 Tom

我認爲你需要添加數據表和列的指示;

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

來源

2016-05-23 19:41:44

我已經試過這個。我收到錯誤消息無法加載資源：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";

來源

2017-02-18 22:58:25 Jose

PrimeNG數據表在Angular 2應用程序中不顯示

回答

相關問題