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

Question

在我的 blHandleDelButtonPressed() 函数中，我正在对单个/多个选定的表行执行删除条目请求。请求完成后(success/error)我想在对话框中显示一个消息 View (sap.m.MessageView 完全相同)这个在这里 https://sapui5.hana.ondemand.com/#/entity/sap.m.MessageView/sample/sap.m.sample.MessageViewInsideDialog )。

问题是请求完成后，弹出Message View，但里面没有数据↓↓↓

这是示例代码:

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 模型并绑定(bind)到 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

我的解决方案是为每个选定的元素建立一个 promise 。如果所有 promise 都得到解决，则调用 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的信息