angular - Angular 10 中有任何 json 编辑器吗？

Question

在升级我的nodejs(以前是8，现在是12)和Angular(以前是7，现在是10)之前，我使用的是ang-jsoneditor。升级后，ang-jsoneditor 似乎无法正常工作，错误为

core.js:4442 ERROR TypeError: Cannot read property 'nativeElement' of undefined
    at JsonEditorComponent.ngOnInit (ang-jsoneditor.js:50)
    at callHook (core.js:3281)
    at callHooks (core.js:3251)
    at executeInitAndCheckHooks (core.js:3203)
    at selectIndexInternal (core.js:6324)
    at Module.ɵɵadvance (core.js:6306)
    at NewConfigurationEditorComponent_Template (new-configuration-editor.component.html:72)
    at executeTemplate (core.js:7511)
    at refreshView (core.js:7380)
    at refreshComponent (core.js:8527)

我访问了主页https://github.com/mariohmol/ang-jsoneditor ，它说只支持从4到9的 Angular 。这是我的package.json，请指教。

{
  "name": "configuration-service",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod --aot --output-hashing all",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "10.2.5",
    "@angular/cdk": "10.2.7",
    "@angular/common": "10.2.5",
    "@angular/compiler": "10.2.5",
    "@angular/core": "10.2.5",
    "@angular/flex-layout": "9.0.0-beta.29",
    "@angular/forms": "10.2.5",
    "@angular/localize": "^10.2.5",
    "@angular/material": "10.2.7",
    "@angular/platform-browser": "10.2.5",
    "@angular/platform-browser-dynamic": "10.2.5",
    "@angular/router": "10.2.5",
    "@ng-bootstrap/ng-bootstrap": "6.2.0",
    "@ng-select/ng-select": "2.18.0",
    "@ngrx/effects": "10.1.2",
    "@ngrx/router-store": "10.1.2",
    "@ngrx/store": "10.1.2",
    "@ngrx/store-devtools": "10.1.2",
    "@types/hammerjs": "2.0.36",
    "ang-jsoneditor": "1.10.5",
    "angular2-uuid": "1.1.1",
    "bootstrap": "4.1.3",
    "core-js": "2.5.7",
    "font-awesome": "4.7.0",
    "jsoneditor": "5.32.5",
    "material-design-icons": "^3.0.1",
    "ng-prettyjson": "0.2.0",
    "ng2-search-filter": "^0.5.1",
    "ngx-autosize": "1.6.3",
    "ngx-clipboard": "^12.3.0",
    "ngx-file-drop": "^8.0.8",
    "ngx-json-viewer": "2.4.0",
    "ngx-tour-core": "^4.1.1",
    "ngx-tour-md-menu": "^4.1.1",
    "ngx-window-token": "3.0.0",
    "rxjs": "6.6.7",
    "rxjs-compat": "6.5.2",
    "serialize-ts": "2.5.1",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1002.3",
    "@angular/cli": "10.2.3",
    "@angular/compiler-cli": "10.2.5",
    "@angular/language-service": "10.2.5",
    "@ngrx/schematics": "10.1.2",
    "@types/jasmine": "2.8.9",
    "@types/jasminewd2": "2.0.5",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "rxjs-tslint-rules": "4.27.1",
    "ts-node": "7.0.1",
    "tslint": "~6.1.0",
    "typescript": "4.0.8"
  }
}

Answer 1

对于 Angular 10，您可以使用库的 1.10.5 版本。

npm i <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1978777e34736a76777c7d706d766b5928372829372c" rel="noreferrer noopener nofollow">[email protected]</a>

对于 2020 年之后阅读本文并需要 Angular 11 和 12(以及即将推出的 13)解决方案的任何人。

我已经 fork 了存储库并更新了它，因为我需要该库用于个人项目，而原始项目目前似乎没有得到积极维护。

https://www.npmjs.com/package/@maaxgr/ang-jsoneditor

对于 Angular 11:

npm install @maaxgr/ang-jsoneditor@11

对于 Angular 12:

npm install @maaxgr/ang-jsoneditor@12