简介
angular4-json-schema-view 是一个基于 Angular 4 开发的可视化 JSON 数据生成工具，主要用于生成具有完整数据结构的 JSON 数据，并以可视化的方式展示。
安装
首先，在命令行中使用 npm 安装 angular4-json-schema-view：
npm install angular4-json-schema-view --save
安装完成后，在项目的 app.module.ts 中引入 angular4-json-schema-view 的模块：
-- -------------------- ---- -------
------ - -------------------- - ---- ----------------------------
-----------
------------- -
------------
--
-------- -
--------------
-------------------- -- ----
--
---------- ---
---------- --------------
--
------ ----- --------- - -使用
在组件中使用时，需要通过 jsonSchema 字段传递 JSON 数据，例如：
<json-schema-view [jsonSchema]="myJsonData"></json-schema-view>
示例代码
在组件中，可以定义如下变量：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
------------ ---- ------ ---------
----------------- -----------------------------------------------
--
------ ----- ------------ -
---------- - -
---------- ------------------------------------------
-------- -------- ---- --------
------- ---------
------------- -
------------ -
------- --------
--
----------- -
------- --------
--
------ -
-------------- ---- -- -------
------- ----------
---------- -
-
--
----------- ------------- -----------
--
-在浏览器中查看生成的视图：
结语
angular4-json-schema-view 是一个优秀的可视化 JSON 数据生成工具，支持多种 JSON 数据类型和属性，并有很高的可定制性和扩展性，是构建前端项目不可或缺的重要工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fc481e8991b448dd27c