如何在JSON-EDITOR中以角度添加下拉列表/选择框

Question

我正在使用一个有角度的JSON编辑器来将一些字段int添加到我的数据中。

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属性的选择框和一些静态值。

我如何在JSON编辑器中包含一个下拉列表。

有什么选择吗？

任何帮助将不胜感激。

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']设置了下拉值。现在它将显示在选择下拉列表中。

并且您可以在onChangeJSON中读取Json编辑器的值>

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