时间戳

首页 > 解决方案 > 选择控件不显示模型中的任何选项

sapui5 - 选择控件不显示模型中的任何选项

问题描述

我正在尝试使用选择/下拉选项来选择可用的相机。我尝试了在不同解决方案中找到的多种方法。我们公司正在使用JS 视图，这使得找到合适的解决方案变得更加困难。因此，我希望这可以帮助我。

获取可用相机的代码，使用键和文本创建一个仅包含相机的新对象数组，以准备选择：

{
  // ...
  getCameras: function() {
    var camList = [];
    navigator.mediaDevices.enumerateDevices().then(function(inputs) {
      inputs.forEach(function(input) {
        if (input.kind === "videoinput") {
          var camera = {
            key: input.deviceId,
            text: input.label
          }
          camList.push(camera);
        }
      });
    });
    return camList;
  },
}

当我打开相机选项时，我运行此功能：

{
  // ...
  setCameraSelect: function() {
    var oController = sap.ui.getCore().byId('Row').getController();
    var cameraModel = new sap.ui.model.json.JSONModel();
    cameraModel.setData({ cameras: oController.getCameras() });
    sap.ui.getCore().setModel(cameraModel, 'cameramodel');
    cameraModel.refresh();
  },
}

到目前为止，模型已作为 cameramodel 加载到 Core 中。我也可以使用以下方法返回：

var model = sap.ui.getCore().getModel("cameramodel");
console.log(model.oData);

结果：cameras: (2) [{…}, {…}]

在我看来（JS），我得到了以下元素：

var cameraSelect = new sap.m.Select("CameraSelect", {
  items: {
    path: "cameramodel>/cameras",
    template:  new sap.ui.core.ListItem({
      key: "{cameramodel>key}",
      text: "{cameramodel>text}"
    })
  },
});

我尝试了这个的不同版本，有和没有型号名称。还尝试将模型添加到元素 ( sap.m.Select) 本身并使用它，无论是否命名它。但是无论我尝试选择什么，菜单都没有提供任何选项。我管得这么差怎么办？

标签： sapui5

解决方案

看法：

<Select id="selectCamera" forceSelection="false" items="{cameraModel>/}">
    <items>
       <core:Item key="{cameraModel>deviceId}" text="{cameraModel>label}"/>
    </items>
</Select>

控制器：

navigator.mediaDevices.enumerateDevices().then(function(aInputs) {
  var oCameraModel = new sap.ui.model.json.JSONModel();
  var aItems = [];
  var oSelectCamera = this.getView().byId("selectCamera");

  aInputs.forEach(function(oInput) {
    if (oInput.kind === "videoinput") {
      aItems.push(oInput);
    }
  });
  oCameraModel.setProperty("/", aItems);
  oSelectCamera.setModel(oCameraModel, "cameraModel"); //Bind model to select
}.bind(this));

推荐阅读