PrimeNG angular2的DataTable分页多选项中的问题

时间:2017-06-24 00:43:24

标签: angular datatable primeng primeng-datatable

我在primeng应用程序中使用angular2。我使用DataTable作为我的表格视图,当我按照HERE中的说明尝试checkbox with paging时,我收到了错误...

错误......

Unhandled Promise rejection: Template parse errors:
Can't bind to 'headerCheckboxToggleAllPages' since it isn't a known property of 'p-dataTable'.
1. If 'p-dataTable' is an Angular component and it has 'headerCheckboxToggleAllPages' input, then verify that it is part of this module.
2. If 'p-dataTable' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. [ERROR ->][headerCheckboxToggleAllPages]="true">
  <p-col"): ViewProductsComponent@22:36 ; Zone: <root> ; Task: Promise.then ; Value: SyntaxError Error: Template parse errors:

我是否需要导入任何特定的模块,因为文档没有说明导入,我有类似的问题HERE,并在导入它工作的模块后。

这是我的view.html

<p-dataTable [value]="cars" [(selection)]="selectedCars3" [paginator]="true" [rows]="5" [headerCheckboxToggleAllPages]="true" sortMode="multiple" [selectionMode]="userRole=='user'? 'none' : 'single' ">
    <p-header>Checkbox Multiple Selection with Paging</p-header>
    <p-column [style]="{'width':'38px'}" selectionMode="multiple"></p-column>
    <p-column field="vin" header="Vin"></p-column>
    <p-column field="year" header="Year"></p-column>
    <p-column field="brand" header="Brand"></p-column>
    <p-column field="color" header="Color"></p-column>
    <p-footer>
        <ul>
            <li *ngFor="let car of selectedCars3" style="text-align: left">{{car.vin + ' - ' + car.brand + ' - ' + car.year + ' - ' + car.color}}</li>
        </ul>
    </p-footer>
</p-dataTable>

@NgModule.imports是......

imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpModule,
routing,
DropdownModule,
DataTableModule,
DialogModule,
ConfirmDialogModule,
ContextMenuModule,
PanelModule,
OverlayPanelModule,
PanelMenuModule,
GrowlModule,
FileUploadModule,
InputSwitchModule,
TreeTableModule,
SharedModule,
CalendarModule,
ClipboardModule,
CommonModule,
SpinnerModule.forRoot(),
TabViewModule,
AutoCompleteModule
]

我的package.json依赖项......

"dependencies": {
    "@angular/common": "^2.3.1",
    "@angular/compiler": "^2.3.1",
    "@angular/core": "^2.3.1",
    "@angular/forms": "^2.3.1",
    "@angular/http": "^2.3.1",
    "@angular/platform-browser": "^2.3.1",
    "@angular/platform-browser-dynamic": "^2.3.1",
    "@angular/router": "^3.3.1",
    "primeng": "^2.0.1",
    "rxjs": "^5.0.1"
}

我也试过p primeng:4.1.0-rc.2同样的问题。请建议。感谢

2 个答案:

答案 0 :(得分:1)

您必须导入

next

并注册@ NgModule.imports

答案 1 :(得分:0)

目前尚不清楚错误背后的原因是什么?但是你可以确定某些事情,比如 -

如果要更改package.json中的版本,要反映版本更改,必须运行命令

npm install

更新依赖关系后,可以通过查看组件的定义文件来确认组件是否存在某些属性。例如,在

中查找“headerCheckboxToggleAllPages”
node_modules\primeng\components\datatable\datatable.d.ts

希望这有帮助。