Question

我尝试使用带有angular2的PrimeNG数据表，但它似乎不起作用。我用npm表示了PrimeNG。在我的组件中我导入

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

然后在模板中使用

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

然而，它没有显示任何内容，我收到错误

无法绑定＆＃39;值＆＃39;因为它不是'p-dataTable＆＃39;的已知属性。

npm list显示我安装了1.0.1版，IDE发现导入就好了。

我做错了什么？

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导入（替换SharedModule的DataTableModule）：

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和你在node_moduls文件夹中的js文件的ts，你会发现缺少一些行为。

我基于github中存在的ts文件在js文件中手动重新创建它们，并且voilá正常工作。

尝试自己并给出反馈意见。

PrimeNG数据表无法正常工作

3 个答案: