TL; DR

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()功能和其他一些相当黑客的方法，但我从未成功过，而且我已经在这个问题上坚持了很长一段时间。

如果有人有想法或建议，如果你让我知道，我会感激不尽。

Answer 1

不需要＆＃34; hacky方法＆＃34;或者自定义格式化程序，以防您只想以人类可读的形式显示时间（或日期）。 UI5附带概念数据类型 ^doc，具有以下优点：

让UI5 parse， format，甚至是validate的价值。
与Container container1 = new Container(new BorderLayout(BorderLayout.CENTER_BEHAVIOR_SCALE)); container1.add(BorderLayout.CENTER, FlowLayout.encloseCenterMiddle(myIcon)); Container container2 = new Container(new BorderLayout(BorderLayout.CENTER_BEHAVIOR_SCALE)); container2.add(BorderLayout.CENTER, FlowLayout.encloseCenterMiddle(new Label(" "))); Container container3 = new Container(new BorderLayout(BorderLayout.CENTER_BEHAVIOR_SCALE)); container3.add(BorderLayout.CENTER, backgroundContainer); startForm.add(BorderLayout.CENTER, container1); startForm.show(); container1.getParent().replaceAndWait(container1, container2, CommonTransitions.createFade(2000)); container2.getParent().replaceAndWait(container2, container3, CommonTransitions.createFade(1000));形成鲜明对比，支持双向数据绑定。
可以定义其他格式选项或输入约束。

在我们的例子中，用于显示OData primitive type＆＃34; Edm.Time＆＃34;的值的适当类型。是formatter ^API。我们可以在sap.ui.model.odata.type.Time绑定信息对象中使用它：

text

^{以上代码摘自此示例：https://embed.plnkr.co/F3t6gI8TPUZwCOnA。该示例使用模拟服务器模拟服务RMTSAMPLEFLIGHT（检出this post以获取访问权限。）}

有关更多信息，包括如何在<Table items="{carrierFlights}"> <columns>  </columns> <ColumnListItem>  <Text text="{ path: 'departureTime', type: 'sap.ui.model.odata.type.Time', formatOptions: { style: 'long' }  }"/> </ColumnListItem> </Table>中绑定 DateTime 或 DateTimeOffset ，请查看文档主题Date and Time Related Controls: Data Binding。

TL; DR

在属性绑定中使用其中一种OData类型。
```
DateRangeSelection
```
有关可用OData类型的完整列表，请参阅API Reference: sap.ui.model.odata.type 在value="{ path: '...', type: 'sap.ui.model.odata.type.*' }"中查看该媒体资源的使用类型。
避免使用metadata.xml或自定义sap.ui.model.type.*来处理来自OData服务的值。

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

上下文

问题

1 个答案:

TL; DR