2

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

风险列表.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"
            }


        ];

风险列表.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'; 
}

索引.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/es6-shim@0.35.0/es6-shim.min.js"></script>

    <script src="https://npmcdn.com/zone.js@0.6.12?main=browser"></script>
    <script src="https://npmcdn.com/reflect-metadata@0.1.3"></script>
    <script src="https://npmcdn.com/systemjs@0.19.27/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>
4

2 回答 2

1

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

    import {DataTableModule} from "primeng/primeng";
于 2017-02-18T22:58:25.240 回答
0

我认为您需要将 DataTable 和 Column 添加为指令；

@Component({
        selector: 'rm-risks',
        directives: [DataTable,Column],
        templateUrl: 'app/risks/risk-list.component.html'
    })
于 2016-05-23T19:41:44.787 回答