Sapui5 返回具有高亮显示颜色的值

要求：我有一个扩展的

fragment.xml

文件。表单元素当前正在使用

formatter.js

进行处理，我正在根据某些条件验证一些值：

在片段中，格式化程序函数被正确调用

<Text text="{
    parts: [
        {path: 'ZName1'},
        {path: 'ZStatus1'}
    ],
    formatter: '.Formatter.delivery'
}" >

---

在输出中，我应该根据条件以绿色、黄色或红色突出显示

sResult

。

文本绑定不适用于突出显示文本。请参考示例以了解替代解决方案

<Text id="id" text="{ZName1}" class="{parts: [{path: 'ZName1'},{path: 'ZStatus1'} ],
     formatter : '.Formatter.delivery'}">

在片段文件中：

<Text text="{parts: [{path: 'ZName1'},{path: 'ZStatus1'}],
     formatter : '.Formatter.delivery'}" >

在格式化程序文件中：

delivery: function(sName, sStatus) {
    switch(sStatus){
        case "A":
            this.addStyleClass("greenTxtHlight");
            this.removeStyleClass("yellowTxtHlight");
            this.removeStyleClass("redTxtHlight");              
        break;
        case "P":
            this.removeStyleClass("greenTxtHlight");
            this.addStyleClass("yellowTxtHlight");
            this.removeStyleClass("redTxtHlight");
        break;
        case "G"://Update this
            this.removeStyleClass("greenTxtHlight");
            this.removeStyleClass("yellowTxtHlight");
            this.addStyleClass("redTxtHlight");
        break;
    }
    return sName;
}

---

不要使用普通的

sap.m.Text

，而是利用它与

Text

完全相同，但支持语义颜色（通过

状态

）开箱即用

运行以下代码段以查看结果：

sap.ui.getCore（）.attachInit（（）=>sap.ui.require([
“sap/m/List”，
“sap/m/CustomListItem”，
“sap/m/ObjectStatus”，//而不是文本
“sap/ui/core/ValueState”，
“sap/ui/model/json/JSONModel”，
]，（列表、项、对象状态、值状态、JSONModel）=>new List（）.bindItems({
路径：“/myData”，
模板：new Item（）.addContent（new ObjectStatus({
正文：“{ZName1}”，
声明：{
路径：“ZStatus1”，
格式化程序：状态=>
状态==“A”？值状态。成功：//绿色
状态==“P”？值状态。警告：//黄色
状态==“Z”？值状态。错误：//红色
ValueState。无
},
}).addStyleClass（“sapUiSmallMargin”），
}).setModel（新的JSONModel({
我的数据：[
{
ZName1：“成功”，
ZStatus1：“A”
},
{
ZName1:“警告”，
ZStatus1：“P”
},
{
ZName1：“错误”，
ZStatus1：“Z”
},
{
ZName1:“无”，
ZStatus1:“
},
],
})).placeAt（“内容”）

窗口[“sap ui配置”]={
libs：“sap.ui.core，sap.m”，
预加载：“异步”，
主题：“萨普·伯利兹”，
兼容版本：“边缘”，
“xx waitForTheme”：对，
“xx异步”：真
}
this.addStyleClass（“greenTxtHlight”）此处将不获取控件的上下文。您需要通过byId方法获取它。此
引用文本上下文。在使用此方法引用控件上下文之前，现在它引用控制器。请查看答案。如果您只想有条件地以语义颜色显示文本，则无需操纵CSS。这是否回答了您的问题？
<Text text="{parts: [{path: 'ZName1'},{path: 'ZStatus1'}],
     formatter : '.Formatter.delivery'}" >

.greenTxtHlight {
    color: green;
}
.yellowTxtHlight {
    color: yellow;
}
.redTxtHlight {
    color: red;
}

delivery: function(sName, sStatus) {
    switch(sStatus){
        case "A":
            this.addStyleClass("greenTxtHlight");
            this.removeStyleClass("yellowTxtHlight");
            this.removeStyleClass("redTxtHlight");              
        break;
        case "P":
            this.removeStyleClass("greenTxtHlight");
            this.addStyleClass("yellowTxtHlight");
            this.removeStyleClass("redTxtHlight");
        break;
        case "G"://Update this
            this.removeStyleClass("greenTxtHlight");
            this.removeStyleClass("yellowTxtHlight");
            this.addStyleClass("redTxtHlight");
        break;
    }
    return sName;
}