如何在 angular 中的 JSON-EDITOR 中添加 Dropdown/selectbox

Question

我正在使用 angular JSON 编辑器将一些字段添加到我的数据中。

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

https://stackblitz.com/edit/ang-jsoneditor

这是我的默认值JSON-编辑器值：

{ "color": { "property": 'Configurable', "Values": [] }, "material": { "property": 'Configurable', "Values": [] }, "size": { "property": 'Configurable', "Values": [] }}

我的要求需要为 property 属性和一些静态值集成一个 select 框。

如何在 JSON-Editor 中包含下拉列表。

有什么选择吗？

我们将不胜感激。

Answer 1

终于找到答案了，

    @ViewChild(JsonEditorComponent, { static: true }) editor: JsonEditorComponent;
    this.editorOptions = new JsonEditorOptions()
    this.editorOptions.modes = ['code', 'text', 'tree', 'view']; 
    this.editorOptions.expandAll = true;
    this.editorOptions.schema ={
  'definitions': {},
  '$schema': 'http://json-schema.org/draft-07/schema#',
  '$id': 'http://example.com/root.json',
  'type': 'object',
  'title': 'Product Attributes',
  'required': [
    'property'
  ],
  'properties': {
    'property': {
      '$id': '#/properties/randomNumber',
      'type': 'string',
      'title': 'Attribute property',
      'default': 'Configurable',
      'examples': [
        'Configurable'
      ],
      'enum': ['Configurable','Simple']
    }
  }
}

我在 new JsonEditorOptions() 的帮助下添加了一个 JSON 架构，并使用 Enum 关键字 'enum': ['Configurable','Simple'] 设置了下拉列表值。现在它将出现在 select 下拉列表中。

并且您可以在 onChangeJSON

中阅读 Json 编辑器值

  this.editorOptions.onChangeJSON = function () {
     const json = this.editor.get();   
     console.log(json);
  };

如何在 angular 中的 JSON-EDITOR 中添加 Dropdown/selectbox

How to Add Dropdown/selectbox inside JSON-EDITOR in angular

jquery

angular

angular6

angular8

angular9