PrimeNG 数据表不工作

Question

我尝试将 PrimeNG 数据表与 angular2 一起使用，但它似乎不起作用。我已经用 npm 安装了 PrimeNG。在我的组件中，我导入了

import {DataTableModule,SharedModule} from 'primeng/primeng';

然后在 template 我使用

<p-dataTable [value]="students">
    <p-column *ngFor="let col of cols" [field]="col.field" [header]="col.header"></p-column>
</p-dataTable>

但是它没有显示任何东西，我得到错误

无法绑定到“值”，因为它不是“p-dataTable”的已知属性。

npm list 显示我安装了 1.0.1 版本，并且 IDE 发现 import 很好。

我做错了什么？

Answer 1

我将启动控件添加到我的共享模块中，以便我可以在任何地方使用它们。

import {InputTextModule, GalleriaModule, MenubarModule, CheckboxModule, DialogModule, MessagesModule, GrowlModule,
  PanelModule, CalendarModule, RadioButtonModule, InputSwitchModule, SelectButtonModule, DataTableModule, DataListModule,
  SplitButtonModule, ButtonModule, DropdownModule, AccordionModule, ProgressBarModule, ConfirmDialogModule, ConfirmationService, 
  TooltipModule } from 'primeng/primeng';

@NgModule({
  imports: [CommonModule, RouterModule, ReactiveFormsModule, 
            MenubarModule, GalleriaModule, InputTextModule, PanelModule, ButtonModule, DropdownModule, DialogModule, AccordionModule, 
            CalendarModule, SelectButtonModule, CheckboxModule, ProgressBarModule, DataTableModule, DataListModule, ConfirmDialogModule],
  declarations: [ ErrorMessagesComponent, FoodDashboardComponent, KgNumberSpinnerComponent, KgDateSpinnerComponent, KgFoodSearchComponent ],
  exports: [ CommonModule, ReactiveFormsModule, HttpModule, RouterModule, 
            MenubarModule, GalleriaModule, InputTextModule, PanelModule, ButtonModule, DropdownModule, DialogModule, AccordionModule, CalendarModule,
            SelectButtonModule, CheckboxModule, DataTableModule, DataListModule, ProgressBarModule, ErrorMessagesComponent, FoodDashboardComponent,
            KgNumberSpinnerComponent, KgDateSpinnerComponent, ConfirmDialogModule, TooltipModule, KgFoodSearchComponent ]

})

这很好用。我认为您正在尝试将 DataTableModule 导入错误的位置。

我认为您需要像这样在 component.module 中声明 DataTableModule 导入（用 DataTableModule 替换 SharedModule）：

import {SharedModule} from '../shared/shared.module' 


@NgModule({
    imports: [ SharedModule, routing ],
    declarations: [ SettingsComponent, SettingsPhysicalComponent ],
    bootstrap: [ SettingsComponent ],
    providers:[ SettingsPhysicalService ]
})

export class SettingsModule {
    constructor() {

    }

Answer 2

如果不查看所有源文件，很难判断。我会猜测您没有正确导入模块。这更像是一个 Angular 2 问题，尽管 PrimeNG 在组件页面上的文档使它有点模糊。

通过将 PrimeNG 组件导入为 Angular 2 模块，这是初始化 NgModule 的方法。

import { DataTableModule, SharedModule } from 'primeng/primeng';

@NgModule({
    imports: [ 
        DataTableModule,
        SharedModule,
        // any other modules like BrowserModule or FormsModule, etc
    ],
    // other declarations, providers, etc...
});

有了这个设置，您就可以在您编写的任何组件中使用p-dataTable。您收到的错误是一种间接方式告诉您您的应用程序不知道p-dataTable 组件是什么。尚未导入。

Answer 3

我之前在使用表格组件和其他组件时也遇到过同样的问题。问题是node_modules里面primeng文件夹里面的js文件和primeng的github项目里面的js文件有点不同。

代码的某些部分有错误，因此您看到了该错误。 如果您比较 dataTable 的 ts 和 node_moduls 文件夹中的 js 文件，您会发现缺少一些行为。

我根据 github 中的 ts 文件在 js 文件中手动重新创建了它们，并且可以正常工作。

尝试一下并给我您的反馈。