Angular 查询构建器模块如何为嵌套属性创建查询答案

【问题标题】：Angular query builder module how to create query for nested propertyAngular 查询构建器模块如何为嵌套属性创建查询
【发布时间】：2019-07-25 22:13:01
【问题描述】：

我正在 Angular 8 中创建搜索页面 UI。为此我安装了 angular2-query-builder 模块。

构建器正在处理基本的一级查询。

问题：如何扩展构建器以允许嵌套字段？

此question also has been asked 由存储库的 github 问题部分中的其他开发人员提供。显然嵌套可以用“实体”实现，但我找不到任何关于如何实现它的文档。我只需要一个级别的嵌套，这与上面链接的 github 问题问题不同，它要求多个级别的嵌套。

在此处的示例中，我希望能够生成对 Item 属性（例如 Item.Title、Item.Description 等）的查询。

要查询的数据：

{
  RecordID: 123,
  RecordType: "Item",
  Items: [
    {
      Title: "A title 1",
      Description: "A description 1"
    },
    {
      Title: "A title 2",
      Description: "A description 2"
    },
    {
      Title: "A title 3",
      Description: "A description 3"
    },
  ]
}

我当前拥有的组件中的配置对象：

  config: QueryBuilderConfig = {
    fields: {
      RecordID: { name: 'RecordID', type: 'number' },
      RecordType: {
        name: 'RecordType',
        type: 'category',
        options: [
          { name: 'Item', value: 'Item' },
          { name: 'Project', value: 'Project' }
        ]
      }
    }
  }

我正在尝试创建的配置对象或类似的东西来实现嵌套查询（仅对顶级属性按预期工作）：

  config: QueryBuilderConfig = {
    fields: {
      RecordID: { name: 'RecordID', type: 'number' },
      RecordType: {
        name: 'RecordType',
        type: 'category',
        options: [
          { name: 'Item', value: 'Item' },
          { name: 'Project', value: 'Project' }
        ]
      }
      Items: {
        Title: {
          name: Title,
          type: string
        },
        Description: {
          name: Description,
          type: string
        }
      }
    }
  }

【问题讨论】：

标签： angular query-builder

【解决方案1】：

QueryBuilder 实际上并没有进入您的数据源，因此它不需要知道它的形状。困难在于将 QueryBuilder 的 query（输出）对象转换为驱动数据源查询的对象。对于内存数据源，您可能可以使用 Ramda 之类的东西。

要配置 QueryBuilder，这可能就是您要查找的内容：

  //Initial query displayed when component is loaded...
  query = {
    condition: 'and',
    rules: [
      { field: 'RecordType', operator: '=', value: 'Item' },
      {
        condition: 'or',
        rules: [
          { field: 'Items.Title', operator: 'contains', value: '2' },
          { field: 'Items.Description', operator: 'contains', value: '2' }
        ]
      }
    ]
  };

  //Mapping fields...
  config: QueryBuilderConfig = {
    fields: {
      RecordID: { name: 'Record ID', type: 'number' },
      RecordType: {
        name: 'Record Type', type: 'category', options: [
          { name: 'Item', value: 'Item' },
          { name: 'Project', value: 'Project' }
        ]
      },
      'Items.Title': { name: 'Item Title', type: 'string' },
      'Items.Description': { name: 'Item Description', type: 'string' }
    }
  }

【讨论】：