Question

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

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

Answer 1

我通过在app.module.ts文件中添加下面的import语句让我出现。 Prime文档没有显示那篇文章，但我发现它在某个地方的工作示例中。

    import {DataTableModule} from "primeng/primeng";

Answer 2

我认为你需要添加DataTable和Column作为指令;

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

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

2 个答案: