DELETE请求完成后Dialog弹窗中sap.m.MessageView无数据显示问题排查

问题诊断与解决方案 #

问题根源 #

我仔细看了你的代码，核心问题出在异步请求的执行时序上：

oModel.remove()是异步操作，你在循环发起所有删除请求后，立刻就创建了JSONModel并初始化MessageView和Dialog。这时候aBookingRemovals还是空数组——因为所有删除请求的success/error回调还没执行呢！

后面虽然回调会往aBookingRemovals里加数据，但JSONModel.setData()已经用初始的空数组完成了初始化，而且普通数组的修改不会触发UI5模型的自动更新。这就导致你在控制台能看到模型后续被填充了数据，但MessageView已经绑定了初始空数据，自然显示不出内容。

另外还有个小细节：你的MessageView的items绑定没有指定命名模型"BookingRemovals"，默认会用组件的默认模型，这也可能导致绑定失效。

修复方案 #

我们需要等所有异步删除请求都完成后，再去创建模型和弹窗，同时确保绑定正确。这里用Promise.all()来管理异步请求是最清晰的方式：

blHandleDelButtonPressed: function(oEvent) {
    var oModel = this.getOwnerComponent().getModel();
    var oTable = this.getView().byId("bookingsList");
    var oSelectedItems = oTable.getSelectedItems();
    oTable.setBusy(true);

    // 把每个删除请求包装成Promise
    var aDeletePromises = oSelectedItems.map(function(selectedItem) {
        var oBooking = selectedItem.getBindingContext();
        var sPath = oBooking.getPath();
        var sBookId = oBooking.getProperty("bookid");
        var sPassName = oBooking.getProperty("PASSNAME");
        var sCustomId = oBooking.getProperty("CUSTOMID");

        return new Promise(function(resolve) {
            oModel.remove(sPath, {
                success: function() {
                    resolve({
                        type: "Success",
                        title: `Booking ${sBookId} successfully removed`,
                        subtitle: `Book ID: ${sBookId} | Passager: ${sPassName} | ID: ${sCustomId}`
                    });
                },
                error: function() {
                    resolve({
                        type: "Error",
                        title: `Booking ${sBookId} wasn't removed`,
                        subtitle: `Book ID: ${sBookId} | Passager: ${sPassName} | ID: ${sCustomId}`
                    });
                }
            });
        });
    });

    // 等待所有删除请求完成后再处理结果
    Promise.all(aDeletePromises).then(function(aBookingRemovals) {
        oTable.setBusy(false);

        // 创建消息项模板
        var oBookingRemovalsTpl = new sap.m.MessageItem({
            type: "{type}",
            title: "{title}",
            subtitle: "{subtitle}"
        });

        // 用最终的结果数组初始化模型
        var oModelBookingRemovals = new sap.ui.model.json.JSONModel(aBookingRemovals);

        // 创建MessageView并绑定模型（直接用默认模型更简单）
        this.oBookingRemovalsView = new sap.m.MessageView({
            showDetailsPageHeader: false,
            items: { 
                path: "/", 
                template: oBookingRemovalsTpl
            }
        });
        this.oBookingRemovalsView.setModel(oModelBookingRemovals);

        // 创建Dialog并打开
        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();
                },
                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
        });

        this.displayMsgDialog(this.oBookingRemovalsDialog);
    }.bind(this)); // 注意绑定this上下文，确保能调用组件方法
}

关键修改点 #

1. 异步请求统一管理：用Promise.all()等待所有删除请求完成，确保我们拿到完整的结果数组后再初始化模型。
2. 模型初始化时机：仅在所有请求完成后，用最终的结果数组创建JSONModel，保证模型初始就有数据。
3. 简化模型绑定：直接将结果模型设为MessageView的默认模型，避免命名模型绑定的遗漏。
4. 修正忙碌状态时机：把oTable.setBusy(false)移到Promise.all()的回调里，确保表格在所有请求完成后才取消忙碌。

这样修改后，MessageView就能正确显示所有删除操作的结果了。

内容的提问来源于stack exchange，提问作者user9254958