如何在表达式绑定中使用三元运算符切换应用属性绑定？

问题描述 投票：0回答：1

看，我有一个表，其中使用 

highlight
的 
sap.m.Table
属性突出显示重复条目。现在我正在尝试实现一个切换按钮，让用户决定是否要突出显示重复项。

在我的控制器中，我创建了切换按钮功能，用于切换绑定到我的表的客户端模型“compareModel”的模型属性“compare”。

我的默认模型是表项的模型。绑定的“dupe”属性包含 

"Success"
或 
"Error"
。

这有效：

<ColumnListItem highlight="{dupe}">
  <Text text="{myItemText}" />
  <!-- ... -->
</ColumnListItem>

现在解决我的问题：

我想根据是否按下切换按钮来设置 

highlight
属性。到目前为止，我的表达式绑定尝试看起来像这样：

<ColumnListItem highlight="{= ${compareModel>/compare} ? ${dupe} : false }">

我尝试到处加引号，但到目前为止还没有成功。 希望有人能帮助我！

data-binding expression sapui5 conditional-operator
1个回答
1
投票

尝试使用 

highlight="{= ${compareModel>/compare} ? ${dupe} : undefined }
。

工作样本：

globalThis.onUI5Init = () => sap.ui.require([
  "sap/ui/core/mvc/XMLView",
  "sap/ui/model/json/JSONModel", // sample model. Applies also to ODataModel
], async function (XMLView, JSONModel) {
  "use strict";

  const control = await XMLView.create({
    definition: `<mvc:View xmlns:mvc="sap.ui.core.mvc"
      xmlns="sap.m"
      displayBlock="true"
      height="100%"
    >
      <App>
        <Page title="Toggle Highlight">
          <headerContent>
            <Switch
              state="{compareModel>/compare}"
              customTextOn=" "
              customTextOff=" "
            />
          </headerContent>
          <List items="{/items}">
            <StandardListItem
              title="{myItemText}"
              highlight="{= %{compareModel>/compare} ? %{dupe} : undefined }"
            />
          </List>
        </Page>
      </App>
    </mvc:View>`,
    models: {
      "compareModel": new JSONModel({ "compare": true }),
      undefined: new JSONModel({
        "items": [
          {
            "myItemKey": 1,
            "myItemText": "A",
            "dupe": "Error"
          },
          {
            "myItemKey": 2,
            "myItemText": "B",
            "dupe": "Success"
          },
          {
            "myItemKey": 3,
            "myItemText": "A",
            "dupe": "Error"
          }
        ]
      }),
    },
  });
  control.placeAt("content");
});
<script id="sap-ui-bootstrap"
  src="https://sdk.openui5.org/nightly/resources/sap-ui-core.js"
  data-sap-ui-libs="sap.ui.core,sap.m,sap.ui.layout,sap.ui.unified"
  data-sap-ui-async="true"
  data-sap-ui-oninit="onUI5Init"
  data-sap-ui-compatversion="edge"
  data-sap-ui-excludejquerycompat="true"
  data-sap-ui-xx-waitfortheme="init"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>

highlight="{= ... ? ... : false }"
的问题在于，
false
不是列表项 
sap.ui.core.MessageType
属性的枚举 
.IndicationColor
或 
highlight
中的有效值。您应该会看到控制台错误报告类似的问题。

但是，使用 

undefined
时，将应用 highlight
 的  默认值，即 
"None"
 控件的 
sap.m.ListBase
。

    

      

      
    

  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.