https://github.com/twp0217/ngx-json-view
A JSON View component for Angular 2+ (基于angular 2+ 的JSON展示组件)
https://github.com/twp0217/ngx-json-view
angular angular2 angular4 json json-view ngx-json-view
Last synced: 3 months ago
JSON representation
A JSON View component for Angular 2+ (基于angular 2+ 的JSON展示组件)
- Host: GitHub
- URL: https://github.com/twp0217/ngx-json-view
- Owner: twp0217
- License: mit
- Created: 2017-04-29T13:27:31.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2019-07-02T13:50:59.000Z (almost 6 years ago)
- Last Synced: 2025-02-24T02:39:45.176Z (3 months ago)
- Topics: angular, angular2, angular4, json, json-view, ngx-json-view
- Language: TypeScript
- Homepage: https://twp0217.github.io/ngx-json-view/
- Size: 240 KB
- Stars: 3
- Watchers: 2
- Forks: 10
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# ngx-json-view
A JSON View component for Angular 2+ (基于angular 2+ 的JSON展示组件)
## 安装
```
npm install @twp0217/ngx-json-view --save
```
## 使用
- 安装依赖包：`@twp0217/ngx-json-view`
```
npm install @twp0217/ngx-json-view --save
```
- 在module导入`NgxJsonViewModule`
```
import { NgxJsonViewModule } from '@twp0217/ngx-json-view';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
NgxJsonViewModule
],
bootstrap: [AppComponent]
})
export class AppModule { }
```
- 准备JSON数据
```
data: { [key: string]: any } = {
"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` - `{ [key: string]: any }` - 数据
- `levelOpen` - `number` - 初始化展开层数
# 支持
- 如果项目对你有帮助，请点颗星:star:，谢谢。
- 如果你对项目有想法、问题、BUG，欢迎讨论。