我最近升级到 Angular 7，PrimeNG 树表不再呈现。我在大多数页面中都使用了树表，现在页面显示为空，并且它也不会引发任何错误。以下是我的 package.json 的外观：
{
"name": "angular4-cliv122",
"version": "0.0.0",
"license": "MIT",
"private": true,
"dependencies": {
"@angular/animations": "^7.2.1",
"@angular/cdk": "^7.2.1",
"@angular/common": "7.2.1",
"@angular/compiler": "7.2.1",
"@angular/compiler-cli": "7.2.1",
"@angular/core": "7.2.1",
"@angular/forms": "7.2.1",
"@angular/http": "7.2.1",
"@angular/platform-browser": "7.2.1",
"@angular/platform-browser-dynamic": "7.2.1",
"@angular/platform-server": "7.2.1",
"@angular/router": "7.2.1",
"@ng-idle/core": "^6.0.0-beta.3",
"@ng-idle/keepalive": "^6.0.0-beta.3",
"@progress/kendo-angular-buttons": "^4.3.2",
"@progress/kendo-angular-charts": "^3.6.0",
"@progress/kendo-angular-dateinputs": "^3.5.4",
"@progress/kendo-angular-dialog": "^3.10.1",
"@progress/kendo-angular-dropdowns": "^3.4.2",
"@progress/kendo-angular-excel-export": "^2.3.0",
"@progress/kendo-angular-grid": "^3.12.0",
"@progress/kendo-angular-inputs": "^4.0.0",
"@progress/kendo-angular-intl": "^1.6.1",
"@progress/kendo-angular-l10n": "^1.3.0",
"@progress/kendo-angular-label": "^1.3.0",
"@progress/kendo-angular-layout": "^3.2.0",
"@progress/kendo-angular-pdf-export": "^1.2.0",
"@progress/kendo-angular-popup": "^2.5.0",
"@progress/kendo-angular-ripple": "^1.1.1",
"@progress/kendo-angular-scrollview": "^2.1.0",
"@progress/kendo-angular-sortable": "^2.0.1",
"@progress/kendo-angular-treeview": "^2.5.0",
"@progress/kendo-angular-upload": "^4.2.2",
"@progress/kendo-data-query": "^1.5.0",
"@progress/kendo-drawing": "^1.5.8",
"@progress/kendo-theme-default": "^3.2.0",
"angular2-moment": "^1.9.0",
"atob": "^2.1.2",
"bootstrap": "^3.4.0",
"chart.js": "2.7.2",
"classlist.js": "^1.1.20150312",
"core-js": "^2.6.2",
"file-saver": "^1.3.3",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"intl": "^1.2.5",
"ngx-toastr": "^9.1.1",
"primeicons": "^1.0.0",
"primeng": "^7.0.4",
"primeui": "^4.1.15",
"quill": "^1.3.0",
"rxjs": "6.0.0",
"rxjs-compat": "6.0.0",
"tableau-api": "^2.2.2",
"typescript": "^3.1.6",
"web-animations-js": "^2.3.1",
"zone.js": "^0.8.28"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.12.2",
"@angular/cli": "7.2.2",
"@angular/compiler-cli": "7.2.1",
"@angular/language-service": "7.2.1",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "^2.0.6",
"@types/node": "^6.0.118",
"codelyzer": "~3.2.0",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.0.4",
"tslint": "~5.7.0"
}
}
我也在app模块中包含了TreeTable模块。控制台也没有错误。导入 TreeTable 的共享模块如下所示：
import { NgModule, ModuleWithProviders, ErrorHandler } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
import { DatePipe } from '@angular/common';
// third party modules
import { ToastrModule } from 'ngx-toastr';
import {
AutoCompleteModule, ListboxModule, EditorModule, MultiSelectModule,
PickListModule, CalendarModule, AccordionModule, TreeModule,
TreeTableModule, ColorPickerModule, InplaceModule
} from 'primeng/primeng';
import { MomentModule } from 'angular2-moment';
//Telerik
import { GridModule } from '@progress/kendo-angular-grid';
import { DialogModule } from '@progress/kendo-angular-dialog';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { AutoCompleteModule as TelerikAutoComplete } from '@progress/kendo-angular-dropdowns';
import { InputsModule } from '@progress/kendo-angular-inputs';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
@NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
AutoCompleteModule,
ListboxModule,
EditorModule,
MultiSelectModule,
PickListModule,
CalendarModule,
AccordionModule,
InplaceModule,
TreeModule, TreeTableModule,
ColorPickerModule,
TelerikAutoComplete,
DropDownsModule,
ToastrModule.forRoot({
newestOnTop: true,
autoDismiss: true
}),
GridModule,
DialogModule,
ButtonsModule,
InputsModule,
MomentModule
],
declarations: [
],
providers: [
DatePipe,
{ provide: ErrorHandler, useClass: GlobalExceptionHandlerService }
],
exports: [
CommonModule,
FormsModule, MomentModule, DropDownsModule, InputsModule]
})
export class SharedModule {
public static forRoot(): ModuleWithProviders {
return {
ngModule: SharedModule,
providers: [
]
};
}
}
我刚刚检查了 primng 网站，他们在版本 7 中更改了树表的实现，这就是导致问题的原因。我们在很多地方都使用了primeng树表，所以有什么方法可以使用旧代码，现在转移到新代码。我知道使用primeng 5 版将是解决方案，但想知道是否有其他方法。请告诉我。