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

【问题标题】：How to Add Dropdown/selectbox inside JSON-EDITOR in angular如何以角度在 JSON-EDITOR 中添加下拉/选择框
【发布时间】：2020-04-08 04:00:24
【问题描述】：

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

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

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

这是我的默认 JSON-Editor 值：

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

我的要求是将property 属性的选择框与一些静态值集成在一起。

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

有什么办法吗？

任何帮助将不胜感激。

【问题讨论】：

标签： jquery angular angular6 angular8 angular9

【解决方案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);
  };

【讨论】：