Angular Syncfusion QueryBuilder远程Multiselect规则导入失效问题

问题场景 #

在Angular应用中使用带列模板的Syncfusion QueryBuilder组件，列模板内的Multiselect通过远程接口加载数据（每次返回5条），筛选时会重新请求接口。组件生成SQL/JSON语句正常，但导入已保存的规则时，规则中的CodeVendor、CompanyRUC等值无法在Multiselect中选中——核心原因是这些值不在当前加载的远程数据集内。

解决方案 #

1. 预加载规则指定的选项数据（推荐方案） #

在Multiselect初始化前，根据规则传入的value批量请求接口获取对应数据，确保这些值存在于Multiselect的数据源中。此方案需要后端支持根据多个value查询对应数据的接口（比如新增批量查询参数）。

2. 启用Multiselect自定义值支持（ fallback 方案） #

如果后端暂时无法支持批量查询，可开启Multiselect的allowCustomValue属性，允许显示不在数据源中的值，同时确保QueryBuilder能正确识别这些值。

修改后的核心代码 #

RuleConfiguration.component.ts（关键部分修改） #

customTemplate(api: string = "", fields: {text: string, value: string}): TemplateColumn {
    return {
      create: () => {
        let customId = util.createGuidRandom()
        const element = document.createElement('input');
        element.setAttribute('customid', customId)
        this.multiSelectDataManagers[customId] = new DataManager({url: environment.serverUriApi + api})
        this.multiSelectQueries[customId] = new Query().addParams('searchText', '').addParams('limit', '5')
        return element;
      },
      destroy: (args: { elementId: string }) => {
        let multiselect: MultiSelect = getComponent(document.getElementById(args.elementId), 'multiselect') as MultiSelect;
        if (multiselect) { multiselect.destroy(); }
      },
      write: async (args: { elements: Element; values: string[] | string; operator: string }) => {
        let texto = args.elements.outerHTML
        let regex = /customid="([^"]+)"/;
        let match = texto.match(regex);
        let multiSelectId = match[1];

        if (['in', 'notin'].indexOf(args.operator) > -1) {
          let preloadedData = [];
          // 若存在导入的规则值，批量请求获取对应完整数据
          if (args.values && Array.isArray(args.values) && args.values.length > 0) {
            // 假设后端新增批量查询接口，通过values参数传递多个值
            const batchApi = `${environment.serverUriApi}${api}/batch`;
            const response = await fetch(batchApi, {
              method: 'POST',
              headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify({ values: args.values })
            });
            preloadedData = await response.json();
          }

          // 合并预加载数据与远程数据源
          const combinedDataSource = new DataManager({
            data: preloadedData,
            url: environment.serverUriApi + api
          });

          this.multiSelectObjs[multiSelectId] = new MultiSelect({
            dataSource: combinedDataSource,
            value: args.values as string[],
            mode: 'Box',
            query: this.multiSelectQueries[multiSelectId],
            allowFiltering: true,
            // 可选：开启自定义值，防止预加载失败时值不显示
            allowCustomValue: true,
            filtering: (e) => {
              this.multiSelectQueries[multiSelectId] = new Query().addParams('searchText', e.text).addParams('limit', '5');
              e.updateData(this.multiSelectDataManagers[multiSelectId], this.multiSelectQueries[multiSelectId])
            },
            fields: fields,
            change: (e) => {
              this.qryBldrObj.notifyChange(e.value, e.element);
              this.onQueryBuilderChange.emit({form: {sql: this.getSql(), json: this.getJson()}, type: 'rules'})
            },
          });
          this.multiSelectObjs[multiSelectId].appendTo('#' + args.elements.id);
        } 
      },
    };
  }

规则导入逻辑优化（可选） #

若需要在QueryBuilder设置规则前统一处理所有规则的预加载，可在ngOnInit中批量获取所有规则对应的数据：

@ViewChild('querybuilder') qryBldrObj: QueryBuilderComponent;
// 预加载数据缓存
preloadedDataCache: Record<string, any[]> = {};

async ngOnInit() {
  const ruleData = JSON.parse(this.activeBreakRule.LogicalConditionJson) as RuleModel;
  // 遍历规则，收集需要预加载的value与对应api映射
  const valueMap = new Map<string, string[]>();
  ruleData.rules.forEach(rule => {
    if (['in', 'notin'].includes(rule.operator) && Array.isArray(rule.value)) {
      // 需自行实现field到对应api的映射逻辑
      const api = this.getApiByField(rule.field);
      if (api) {
        valueMap.set(api, [...(valueMap.get(api) || []), ...rule.value as string[]]);
      }
    }
  });

  // 批量预加载所有需要的数据
  for (const [api, values] of valueMap.entries()) {
    const batchApi = `${environment.serverUriApi}${api}/batch`;
    const response = await fetch(batchApi, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ values })
    });
    this.preloadedDataCache[api] = await response.json();
  }

  this.qryBldrObj.setRules(ruleData);
}

关键说明 #

• 优先采用预加载数据方案，确保选中值的合法性与显示一致性，这需要后端配合提供批量查询接口。
• allowCustomValue仅作为临时 fallback 方案，避免预加载失败时用户看不到已保存的规则值。

内容的提问来源于stack exchange，提问作者Jorge Ramón