Angular 10 中有任何 json 编辑器吗?

use*_*118 2 angular jsoneditor

在升级我的nodejs(以前是8,现在是12)和Angular(以前是7,现在是10)之前,我使用的是ang-jsoneditor。升级后,ang-jsoneditor 似乎不起作用,错误是

\n
core.js:4442 ERROR TypeError: Cannot read property \'nativeElement\' of undefined\n    at JsonEditorComponent.ngOnInit (ang-jsoneditor.js:50)\n    at callHook (core.js:3281)\n    at callHooks (core.js:3251)\n    at executeInitAndCheckHooks (core.js:3203)\n    at selectIndexInternal (core.js:6324)\n    at Module.\xc9\xb5\xc9\xb5advance (core.js:6306)\n    at NewConfigurationEditorComponent_Template (new-configuration-editor.component.html:72)\n    at executeTemplate (core.js:7511)\n    at refreshView (core.js:7380)\n    at refreshComponent (core.js:8527)\n
Run Code Online (Sandbox Code Playgroud)\n

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

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

Cae*_*lis 6

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

npm i ang-jsoneditor@1.10.5
Run Code Online (Sandbox Code Playgroud)

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

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

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

对于 Angular 11:

npm install @maaxgr/ang-jsoneditor@11
Run Code Online (Sandbox Code Playgroud)

对于 Angular 12:

npm install @maaxgr/ang-jsoneditor@12
Run Code Online (Sandbox Code Playgroud)