Problème de multi-sélection de pagination DataTable pour PrimeNG angular2

Question

J'utilise primeng dans mon application angular2. J'utilise DataTable pour moi de table et lorsque je tente de faire checkbox with paging comme expliqué dans HERE Je reçois des erreurs ...

... Erreur

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: 

Ai-je besoin d'importer un module spécifique pour ce que la documentation ne dit pas sur les importations et j'ai eu la question similaire HERE et après avoir importé les modules cela a fonctionné.

Voici mon 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> 

et @NgModule.imports sont ...

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 
] 

Mes dépendances 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" 
} 

J'ai aussi essayé avec p primeng:4.1.0-rc.2 a eu le même problème. Veuillez suggérer. Merci

Answer 1

Vous devez importer

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

et inscrivez-vous à @ NgModule.imports

Answer 2

On ne sait pas ce qui pourrait être la raison derrière l'erreur, mais vous pouvez vous assurer que certaines choses comme -

Si vous changez la version en package.json, afin de refléter le changement de version, vous devez exécuter la commande

npm install 

Après la mise à jour des dépendances, on peut vérifier si certaines propriétés sont présentes ou non pour un composant en examinant son fichier de définition. par exemple recherchez 'headerCheckboxToggleAllPages' dans

node_modules\primeng\components\datatable\datatable.d.ts 

Espérons que cela aide.