PrimeNG angular2 的 DataTable 分页多选问题
Issue in DataTable pagination multi selection for PrimeNG angular2
我在 angular2
应用程序中使用 primeng
。我正在为我的 table 视图使用 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:
我是否需要为此导入任何特定模块,因为文档没有说明导入,我遇到了类似的问题导入模块后它起作用了。
这是我的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"
}
我也尝试过 pprimeng:4.1.0-rc.2
遇到了同样的问题。请建议。谢谢
您必须导入
import {DataTableModule,SharedModule} from 'primeng/primeng';
并在@NgModule.imports
注册
不清楚错误背后的原因是什么但是您可以确定某些事情,例如 -
如果您在 package.json 中更改版本,要反映版本更改,您必须 运行 命令
npm install
更新依赖项后,可以通过查看组件的定义文件来确认某个组件是否存在某些 属性。例如在
中查找 'headerCheckboxToggleAllPages'
node_modules\primeng\components\datatable\datatable.d.ts
希望对您有所帮助。
我在 angular2
应用程序中使用 primeng
。我正在为我的 table 视图使用 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:
我是否需要为此导入任何特定模块,因为文档没有说明导入,我遇到了类似的问题
这是我的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"
}
我也尝试过 pprimeng:4.1.0-rc.2
遇到了同样的问题。请建议。谢谢
您必须导入
import {DataTableModule,SharedModule} from 'primeng/primeng';
并在@NgModule.imports
注册不清楚错误背后的原因是什么但是您可以确定某些事情,例如 -
如果您在 package.json 中更改版本,要反映版本更改,您必须 运行 命令
npm install
更新依赖项后,可以通过查看组件的定义文件来确认某个组件是否存在某些 属性。例如在
中查找 'headerCheckboxToggleAllPages'node_modules\primeng\components\datatable\datatable.d.ts
希望对您有所帮助。