Сетка PrimeNG не отображается на странице и не возникает ошибок

Question

У меня есть проект Angularjs 2 с использованием .Net ядра. Я пытаюсь использовать PrimeNG для выполнения операции CRUD. Я вызываю службу API для получения данных из базы данных. Я написал два компонента, которые перебирают данные из службы, используя простые, и я получаю записи на странице. Вторая страница использует PrimeNg datatable и использует тот же сервис, но на экране ничего не отображается. При попытке отладки кода с использованием F12 я не вижу никаких ошибок, вызов службы возвращает правильные данные. Но в dom-объекте я не вижу генерируемых данных. прилагается код HTML и TS файлов

Детали проекта

<p-dataTable [value]="projects" selectionMode="single" [(selection)]="selectedProject" (onRowSelect)="onRowSelect($event)" [paginator]="true" rows="3" [responsive]="true"> 
    <header>CRUD for Projects</header> 
    <p-column field="id" header="Id" [sortable]="true"></p-column> 
    <p-column field="projectcode" header="Code" [sortable]="true"></p-column> 
    <p-column field="projectname" header="Description" [sortable]="true"></p-column> 
    <p-column field="fkclient" header="Client Id" [sortable]="true"></p-column> 
    <p-column field="clientcode" header="Client Code" [sortable]="true"></p-column> 
</p-dataTable> 

TS Файл

import {OnInit, Component } from '@angular/core'; 
import { Http } from '@angular/http'; 
import {DataTableModule, SharedModule, DataTable, Column} from 'primeng/primeng'; 
import {Header} from 'primeng/primeng'; 
import {Footer} from 'primeng/primeng'; 
import {ProjectDetails} from './ProjectDetails'; 

@Component({ 
    selector: 'fetch-data', 
    template: require('./fetchdata.component.html') 
}) 
export class FetchDataComponent implements OnInit { 

    newProject: boolean; 

    public projects: ProjectDetails[]; 

    constructor(private http: Http) { 
    } 

    ngOnInit() { 
     this.http.get('http://localhost:53447/api/project/').subscribe(result => { 
      this.projects = result.json(); 
     }); 
    } 
} 

ProjectDetails модель предметной области

export interface ProjectDetails { 
    id: number; 
    projectcode: string; 
    projectname: string; 
    fkclient: number; 
    clientcode: string; 
} 

То, что я подозреваю, что по какой-то причине WebPack не включает файлы, связанные с PrimeNG, в папку dist. Я должен был фактически скопировать файлы CSS также вручную, но я не был уверен, что нужно делать другим файлам.

Answer 1

Вы импортировали DatatableModule в свой AppModule?

@NgModule({ 
    imports: [ 
     BrowserModule, 
     FormsModule, 
     DatatableModule 
    ], 
    declarations: [ 
     AppComponent 
    ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { }