You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

OpenUI5 SearchField如何传递两个数据源?配置代码报错求助

Fixing "push is not a function" Error When Binding Multiple Data Sources to OpenUI5 SearchField

Let's break down what's going wrong here and how to fix it:

The Root Cause

Your current attempt uses the parts attribute directly on the suggestionItems binding, but OpenUI5's parts is designed for multi-path binding of a single property (e.g., combining two fields into one display text). It doesn't automatically merge two array data sources into a single flat array for collection bindings.

Instead, when you use parts with suggestionItems, you're passing a 2-dimensional array ([[SOURCE1 items], [SOURCE2 items]]) to the control, which expects a flat array of objects. This mismatch is why you're getting the push is not a function error— the control tries to treat each inner array as a single suggestion item, which doesn't have the expected methods.

Solution 1: Manually Merge Data in the suggest Event Handler

The simplest fix is to fetch both data sources in your onSuggestDiseaseTerm1 method, merge them into a single array, and then populate the suggestion items directly:

Updated XML Code

<SearchField id="mySFID" enableSuggestions="true" search="onSelectDiseaseTerm" suggest="onSuggestDiseaseTerm1">
</SearchField>

Controller Code for onSuggestDiseaseTerm1

onSuggestDiseaseTerm1: function(oEvent) {
  const oSearchField = oEvent.getSource();
  const oDb2Model = this.getView().getModel("db2");
  
  // Fetch both data sources (fallback to empty arrays if data is missing)
  const aSource1Items = oDb2Model.getProperty("/SOURCE1/") || [];
  const aSource2Items = oDb2Model.getProperty("/SOURCE2/") || [];
  
  // Merge the two arrays into a single flat array
  const aCombinedItems = [...aSource1Items, ...aSource2Items];
  
  // Create SuggestionItem instances from the merged data and set them to the control
  oSearchField.setSuggestionItems(
    aCombinedItems.map(item => new sap.m.SuggestionItem({
      text: item.DISEASE_TERM,
      key: item.DISEASE_TERM
    }))
  );
}

Solution 2: Use a Custom Composite Type to Merge Data

If you prefer to keep the binding declarative in XML, you can create a custom CompositeType to merge the two arrays, then bind to the combined result:

Controller Setup (Register Custom Type)

sap.ui.define([
  "sap/ui/core/mvc/Controller",
  "sap/ui/model/type/CompositeType",
  "sap/ui/model/type/Array"
], function(Controller, CompositeType, ArrayType) {
  "use strict";

  return Controller.extend("your.controller.Namespace", {
    onInit: function() {
      // Create a custom composite type to merge two arrays
      const oMergeArrayType = new CompositeType({
        types: [new ArrayType(), new ArrayType()],
        formatter: (arr1, arr2) => (arr1 || []).concat(arr2 || [])
      });
      
      // Bind a computed property to the merged arrays
      this.getView().getModel("db2").bindProperty("/mergedSuggestions", {
        parts: [
          { path: "/SOURCE1/" },
          { path: "/SOURCE2/" }
        ],
        type: oMergeArrayType
      });
    },

    // ... your other controller methods
  });
});

Updated XML Code

<SearchField id="mySFID" enableSuggestions="true" search="onSelectDiseaseTerm" suggest="onSuggestDiseaseTerm1" suggestionItems="{db2>/mergedSuggestions}">
  <suggestionItems>
    <SuggestionItem text="{db2>DISEASE_TERM}" key="{db2>DISEASE_TERM}" />
  </suggestionItems>
</SearchField>

Both approaches will correctly combine your two data sources into a single list of suggestions, resolving the push is not a function error.

内容的提问来源于stack exchange,提问作者grandren

火山引擎 最新活动