Fiori中MultiComboBox去重问题求助

你遇到的问题核心是MultiComboBox本身没有mergeDuplicates属性，直接绑定原始重复数据会显示重复选项，以下是三种可行的去重实现方式：

方法1：提前处理JSON模型数据（推荐） #

在控制器初始化阶段，从原始数据中提取去重后的Side列表，存入模型的新属性中，再绑定到控件：

控制器代码 #

onInit: function() {
  const oWolfteamModel = this.getView().getModel("Wolfteam");
  const aOriginalCharacters = oWolfteamModel.getProperty("/Characters");
  
  // 提取Side字段并去重，生成结构化数组
  const aUniqueSides = [...new Set(aOriginalCharacters.map(char => char.Side))].map(side => ({
    Side: side
  }));
  
  // 将去重后的数据存入模型
  oWolfteamModel.setProperty("/UniqueSides", aUniqueSides);
}

修改XML绑定 #

<fb:FilterItem name="Side" label="Side">
  <fb:control>
    <MultiComboBox 
      selectionChange="handleSelectionChange" 
      selectionFinish="handleSelectionFinish" 
      width="" 
      placeholder="Choose Side." 
      required="true" 
      items="{Wolfteam>/UniqueSides}"
    >
      <core:Item key="{Wolfteam>Side}" text="{Wolfteam>Side}" />
    </MultiComboBox>
  </fb:control>
</fb:FilterItem>

方法2：使用聚合绑定的groupBy参数（SAPUI5 1.60+） #

利用SAPUI5聚合绑定的分组功能，自动按Side字段去重，无需额外处理数据：

修改XML绑定 #

<fb:FilterItem name="Side" label="Side">
  <fb:control>
    <MultiComboBox 
      selectionChange="handleSelectionChange" 
      selectionFinish="handleSelectionFinish" 
      width="" 
      placeholder="Choose Side." 
      required="true" 
      items="{
        path: 'Wolfteam>/Characters',
        groupBy: 'Side',
        sorter: { path: 'Side' }
      }"
    >
      <core:Item key="{Wolfteam>Side}" text="{Wolfteam>Side}" />
    </MultiComboBox>
  </fb:control>
</fb:FilterItem>

groupBy会将相同Side的项归为一组，MultiComboBox仅显示每组的唯一值，配合sorter确保选项排序有序。

方法3：通过Formatter过滤重复项（不推荐） #

利用绑定Formatter动态过滤重复值，但此方法每次控件渲染都会执行，性能不如提前处理数据：

控制器添加Formatter函数 #

uniqueSidesFormatter: function(aCharacters) {
  if (!aCharacters || !Array.isArray(aCharacters)) return [];
  // 去重并返回结构化数组
  return [...new Set(aCharacters.map(char => char.Side))].map(side => ({ Side: side }));
}

修改XML绑定 #

<fb:FilterItem name="Side" label="Side">
  <fb:control>
    <MultiComboBox 
      selectionChange="handleSelectionChange" 
      selectionFinish="handleSelectionFinish" 
      width="" 
      placeholder="Choose Side." 
      required="true" 
      items="{
        path: 'Wolfteam>/Characters',
        formatter: '.uniqueSidesFormatter'
      }"
    >
      <core:Item key="{Wolfteam>Side}" text="{Wolfteam>Side}" />
    </MultiComboBox>
  </fb:control>
</fb:FilterItem>

注意：你之前添加的mergeDuplicates="true"属性对MultiComboBox无效，该属性不属于此控件的API，因此不会产生去重效果。

内容的提问来源于stack exchange，提问作者Kaan Can Calkan