# ngx-json-view **Repository Path**: twp0217/ngx-json-view ## Basic Information - **Project Name**: ngx-json-view - **Description**: A JSON View component for Angular 2+ (基于angular 2+ 的JSON展示组件) - **Primary Language**: TypeScript - **License**: MIT - **Default Branch**: master - **Homepage**: http://twp0217.oschina.io/ngx-json-view - **GVP Project**: No ## Statistics - **Stars**: 6 - **Forks**: 2 - **Created**: 2017-04-30 - **Last Updated**: 2024-01-16 ## Categories & Tags **Categories**: angular-extensions, json-tools **Tags**: None ## README # ngx-json-view A JSON View component for Angular 2+ (基于angular 2+ 的JSON展示组件) ## 安装 ``` npm install ngx-json-view --save ``` ## 使用 - 安装依赖包:`ngx-json-view` ``` npm install ngx-json-view --save ``` - 在module导入`NgxJsonViewModule` ``` import { NgxJsonViewModule } from 'ngx-json-view'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, HttpModule, NgxJsonViewModule ], bootstrap: [AppComponent] }) export class AppModule { } ``` - 准备JSON数据 ``` data = { "name": "twp0217", "url": "https://github.com/twp0217", "string": "github", "number": 88, "boolean": true, "object": { "obj1": "obj1", "obj2": "obj2", "object": { "obj11": "obj11", "obj22": "obj22" }, "emptyArray": [] }, "array": [ 1, 2, 3 ], "date": new Date(), "null": null }; ``` - 在模板页面使用 ``` ``` # 文档 - `data` - `Object` - 数据 - `levelOpen` - `number` - 初始化展开层数(初始值:0) # 支持 - 如果项目对你有帮助,请点颗星:star:,谢谢。 - 如果你对项目有想法、问题、BUG,欢迎讨论。