Таблица PrimeNG Tree не отображается после обновления до Angular 7

Question

Я недавно обновился до 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"
  }
}

Я также включил модуль 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 версии 5 будет решением, но хотелось бы узнать, есть ли другой способ. Не могли бы вы сообщить мне.

Answer 1

PrimeNg 7 представил другой способ реализации таблиц дерева. В версии 5 p-столбцы были поддержаны в древовидных таблицах и больше не поддерживаются в версии 7. Нам нужно заменить p-столбцы на ng-template и использовать tr и td в шаблоне.