如何从OData服务正确添加日期/时间到UI？

Question

上下文

我正在创建一个小的演示页面,显示UI5的一些直接功能.该页面包含两个主要页面:

• 在第一页上,有一个可以创建,删除和更新的运营商列表.这些运营商有一个ID(Carrid).
• 如果单击一个运营商,它们将被路由到第二页,在该第二页上,所选运营商的所有航班都显示在一个表格中(包含有关航班的一些信息).

该表如下所示:

<Table id="detailTable" inset="false" class="sapUiResponsiveMargin">
    <columns>
        <Column>
            <Text text="ID" />
        </Column>
        <Column>
            <Text text="Flightnumber" />
        </Column>
        <Column>
            <Text text="Starts in" />
        </Column>
        <Column>
            <Text text="Departs at" />   
        </Column> 
        <Column>
            <Text text="Lands in" />   
        </Column> 
        <Column>
            <Text text="Lands at" />   
        </Column>
    </columns>
</Table>

使用以下代码将数据绑定到列:

// Get routing data and show only entrys with the matched primary key (Carrid)
_onRouteMatched: function(oEvent) {
    // ...
    var oArgs = oEvent.getParameter("arguments");
    var oFlightTable = oView.byId("detailTable");
    oFlightTable.bindAggregation("items", {
        path: "/CarrierSet(" + "'" + oArgs.flightPath + "'" + ")/FlightSet",
        template: new sap.m.ColumnListItem({
            cells: [
                new sap.m.Text({
                    text: "{Carrid}"
                }),
                new sap.m.Text({
                    text: "{Connid}"
                }),
                new sap.m.Text({
                    text: "{Cityfrom}"
                }),
                new sap.m.Text({
                    text: "{Deptime}"
                }),
                new sap.m.Text({
                    text: "{Cityto}"
                }),
                new sap.m.Text({
                    text: "{Arrtime}"
                })
            ]
        })
    });
}

问题

如果可以在不首先操作数据的情况下显示数据,则代码可以正常工作.但是字段{Deptime}并且{Arrtime}具有我需要首先转换的类型Edm.Time,以便以人类可读的形式显示它.
我能用这段代码实现这一点(我知道,这不是最有效的方法,但我还在学习.所以如果你有任何改进,请随意发布):

pageTable.addEventDelegate({
    onAfterRendering: function() {
        var mTable = this.getView("FilterBarSimple").byId("detailTable");
        var mModel = mTable.getModel();
        var aItems = mTable.getItems();

        // ----- TIME CONVERSION ----

        var arrayTime = [];
        for (var iTime = 0; iTime < aItems.length; iTime++) {
            var iAdded = mModel.getProperty("Deptime", aItems[iTime].getBindingContext());
            arrayTime.push(iAdded);
        }
        var timeFormat = sap.ui.core.format.DateFormat.getTimeInstance({
            pattern: "kk:mm:ss"
        });
        var tz = new Date(0).getTimezoneOffset() * 60 * 1000;
        var arrayTimeClean = [];
        $.each(arrayTime, function(ii, ee) {
            var timeStr = timeFormat.format(new Date(ee.ms + tz));
            arrayTimeClean.push(timeStr);
        });
    }
});

这会生成正确的输出:

但是我无法再将这个被操纵的数据正确地绑定到表中.我已经尝试了它的OData.read()功能和其他一些相当hacky的方法,但我从来没有成功,我已经坚持这个问题很长一段时间了.

如果有人有想法或建议,如果你让我知道,我会非常感激.

Answer 1

如果您只是想以人类可读的形式显示时间(或日期),则不需要"hacky方法"或自定义格式化程序.UI5附带概念数据类型^doc,具有以下优点:

• 让UI5 为您解析, 格式化甚至验证值.
• 与之相反,支持双向数据绑定formatter.
• 可以定义其他格式选项或输入约束.

在我们的例子中,用于显示OData原语类型 "Edm.Time" 的值的适当类型是^API.我们可以在绑定信息对象中使用它:sap.ui.model.odata.type.Timetext

<Table items="{carrierFlights}">
  <columns>
    <!-- ... --> 
  </columns>
  <ColumnListItem>
    <!-- ... -->
    <Text text="{
      path: 'departureTime',
      type: 'sap.ui.model.odata.type.Time',
      formatOptions: {
        style: 'long'
      }
    <!-- ... -->
    }"/>
  </ColumnListItem>
</Table>

^{上面的代码摘自此示例:https://embed.plnkr.co/F3t6gI8TPUZwCOnA.该示例使用模拟服务器模拟服务RMTSAMPLEFLIGHT(查看此帖以获取访问权限).}

欲了解更多信息,包括如何绑定日期时间或的DateTimeOffset中DateRangeSelection,看看该文档主题日期和时间相关的控件:数据绑定.

TL; DR

• 在属性绑定中使用其中一种OData类型.

  value="{
    path: '...',
    type: 'sap.ui.model.odata.type.*'
  }"
  

  有关可用OData类型的完整列表,请参阅API参考:sap.ui.model.odata.type.
  检查属性使用的类型metadata.xml.

• 避免使用或自定义来自OData服务的值.sap.ui.model.type.*formatter