DELETE 请求完成后，sap.m.MessageView 的内容数据未在对话框弹出窗口中显示

Question

在我的 blHandleDelButtonPressed() 函数中，我正在对 single/multiple 选定的 table 行执行删除条目请求。请求完成后（在 success / error 之后）我想在对话框中显示一个消息视图（sap.m.MessageView 就像这里的 https://sapui5.hana.ondemand.com/#/entity/sap.m.MessageView/sample/sap.m.sample.MessageViewInsideDialog 一样）。

问题是请求DONE的时候，弹出MessageView，但是里面没有数据↓↓↓

示例代码如下：

displayMsgDialog: function(oDialog) {
    oDialog.open();
},
blHandleDelButtonPressed: function(oEvent) { 
    var oModel = this.getOwnerComponent().getModel();
    var oTable = this.getView().byId("bookingsList");
    var oSelectedItems = oTable.getSelectedItems();
    var aBookingRemovals = [];

    oTable.setBusy(true);

    oSelectedItems.forEach(function(selectedItem) {
        var oBooking = selectedItem.getBindingContext();
        var sPath =  oBooking.getPath(),
            sBookId = oBooking.getProperty("bookid"),
            sPassName = oBooking.getProperty("PASSNAME"),
            sCustomId = oBooking.getProperty("CUSTOMID");

        oModel.remove(sPath, {
            success: function(oData, response) {
                aBookingRemovals.push({
                    type: "Success",
                    title: "Booking " + sBookId + " successfully removed",
                    subtitle: "Book ID: " + sBookId + " | Passager: " + sPassName + " | ID: " + sCustomId
                });
            },
            error: function() {
                aBookingRemovals.push({
                    type: "Error",
                    title: "Booking " + selectedItem.getBindingContext().getProperty("bookid") + " wasn't removed",
                    subtitle: "Book ID: " + sBookId + " | Passager: " + sPassName + " | ID: " + sCustomId
                });
            }
        }); 
    });

    oTable.setBusy(false); 

    var oBookingRemovalsTpl = new sap.m.MessageItem({
        type: "{type}",
        title: "{title}",
        subtitle: "{subtitle}"
    });

    var oModelBookingRemovals = new JSONModel();
    oModelBookingRemovals.setData(aBookingRemovals);

    this.oBookingRemovalsView = new sap.m.MessageView({
        showDetailsPageHeader: false,
        items: {
            path: "/",
            template: oBookingRemovalsTpl
        }
    });

    this.oBookingRemovalsView.setModel(oModelBookingRemovals, "BookingRemovals");

    this.oBookingRemovalsDialog = new sap.m.Dialog({
        resizable: true,
        content: this.oBookingRemovalsView,
        state: 'Information',
        beginButton: new sap.m.Button({
            press: function () {
                this.getParent().close();
                oTable.removeSelections();
                aBookingRemovals = []; 
            },
            text: "Close"
        }),
        customHeader: new sap.m.Bar({
            contentMiddle: [
                new sap.m.Text({ text: "We tried to remove selected bookings"})
            ]
        }),
        contentHeight: "300px",
        contentWidth: "500px",
        verticalScrolling: false
    });

    // Displaying the final Message View inside Dialog
    this.displayMsgDialog(this.oBookingRemovalsDialog);
}

浏览器的控制台没有显示任何错误/警告。

奇怪的事情:

在我选择了3个随机行并执行了blHandleDelButtonPressed()函数之后，我在Chrome的控制台中调用了detail.oBookingRemovalsView.getModel("BookingRemovals").getData()，得到了这个↓↓↓（如你所见, 所选行的数据已插入 BookingRemovals 模型并绑定到 window.detail.oBookingRemovalsView)

> detail.oBookingRemovalsView.getModel("BookingRemovals").getData()

   (3) [{…}, {…}, {…}, {…}, {…}]
      1: {type: "Error", title: "Booking 00000001 wasn't removed", subtitle: "Book ID: 00000001 | Passager: Benjamin Waldmann | ID: 00004113"}
      2: {type: "Error", title: "Booking 00000002 wasn't removed", subtitle: "Book ID: 00000002 | Passager: Adam Gutenberg | ID: 00002720"}
      3: {type: "Error", title: "Booking 00000005 wasn't removed", subtitle: "Book ID: 00000005 | Passager: Juan Martin | ID: 00003740"}
      length: 5
      __proto__: Array(0)

然而当我调用detail.oBookingRemovalsView.getItems()时，我得到一个空数组↓↓↓

> detail.oBookingRemovalsView.getItems()

   []
      length: 0
      __proto__: Array(0)

问题出在哪里？

Answer 1

我的解决方案是为每个选定的元素建立一个承诺。如果所有承诺都已解决，请调用 then 函数，该函数现在可以从 success 和 error 函数访问已解决的对象。

blHandleDelButtonPressed: function(oEvent) { 
    var oModel = this.getOwnerComponent().getModel();
    var oTable = this.getView().byId("bookingsList");
    var aSelectedItems = oTable.getSelectedItems();
    // var aBookingRemovals = [];

    oTable.setBusy(true);

    // map applies a function to every element of an array 
    // and stores the returned value in a new array
    var aPromises = aSelectedItems.map(function(selectedItem) {
        return new Promise(function(resolve, reject) {

            var oBooking = selectedItem.getBindingContext();
            var sPath =  oBooking.getPath(),
                sBookId = oBooking.getProperty("bookid"),
                sPassName = oBooking.getProperty("PASSNAME"),
                sCustomId = oBooking.getProperty("CUSTOMID");

            oModel.remove(sPath, {
                success: function(oData, response) {
                    // pass the following object to the THEN function
                    resolve({
                        type: "Success",
                        title: "Booking " + sBookId + " successfully removed",
                        subtitle: "Book ID: " + sBookId + " | Passager: " + sPassName + " | ID: " + sCustomId
                    });
                },
                error: function() {
                    // pass the following object to the THEN function
                    // when using Promise.all you don't want to use reject
                    // otherwise the resolved promises will get lost
                    resolve({
                        type: "Error",
                        title: "Booking " + selectedItem.getBindingContext().getProperty("bookid") + " wasn't removed",
                        subtitle: "Book ID: " + sBookId + " | Passager: " + sPassName + " | ID: " + sCustomId
                    });
                }
            }); 
        });
    });

    Promise.all(aPromises).then(function(aResolvedValues) {
        // aResolvedValues contains all values that have been resolved
        // it should look exactly the same as aBookingRemovals
        // if we got here, all calls have been finished. this is a much better place to call 
        oTable.setBusy(false); 

        // add the rest of the code here
    });

阅读更多关于 Promises

阅读更多关于 Promise.all

阅读更多关于 Array.map

DELETE 请求完成后，sap.m.MessageView 的内容数据未在对话框弹出窗口中显示

Content data not showing for sap.m.MessageView inside Dialog popup after DELETE request completed

javascript

crud

sapui5