如何在SAP UI5 Controller中调用Formatter并正确绑定this指针？

问题根源 #

你的代码存在两个关键问题：

1. 方法名不匹配：Controller中调用的formatter.getStatusText(sCode)在Formatter文件中不存在，实际定义的方法是serviceCoderDescription
2. 上下文丢失：Formatter中this.getOwnerComponent()的this指向的是formatter对象本身，而非Controller实例，直接调用会抛出Cannot read property 'getOwnerComponent' of undefined错误

解决方案 #

下面提供两种可行的修复方案，可根据项目需求选择：

方案1：绑定Formatter方法的上下文到Controller #

通过bind方法将Formatter方法的上下文绑定到当前Controller，确保this指向正确：

修改Controller代码：

sap.ui.define([
    "../controller/BaseController",
    "../model/models",
    "../model/formatter"
], function (BaseController, models, formatter) {
    "use strict";

    return BaseController.extend("ns.controller.Main", {
        formatter: formatter,

        onInit: function() {
            // 将formatter方法的上下文绑定到当前Controller实例
            this.formatter.serviceCoderDescription = this.formatter.serviceCoderDescription.bind(this);
        },

        _formattedUiTableData: function (sCode){
            // 调用正确的方法名
            return this.formatter.serviceCoderDescription(sCode);
        }
    });
});

Formatter文件无需修改，绑定上下文后this会指向Controller，能正常获取resourceBundle。

方案2：重构Formatter，不依赖上下文（推荐） #

让Formatter方法接收resourceBundle作为参数，摆脱对UI5组件上下文的依赖，复用性更强：

修改formatter.js：

sap.ui.define([], function () {
    "use strict";

    return {
        serviceCoderDescription(sCode, oResourceBundle) {
            switch (sCode) {
                case "A":
                    return oResourceBundle.getText("CodeA");
                case "B":
                    return oResourceBundle.getText("CodeB");
                default:
                    return sCode;
            }
        }
    };
});

修改Controller代码：

sap.ui.define([
    "../controller/BaseController",
    "../model/models",
    "../model/formatter"
], function (BaseController, models, formatter) {
    "use strict";

    return BaseController.extend("ns.controller.Main", {
        formatter: formatter,

        _formattedUiTableData: function (sCode){
            // 在Controller中获取resourceBundle并传入Formatter
            const oResourceBundle = this.getOwnerComponent().getModel("i18n").getResourceBundle();
            return this.formatter.serviceCoderDescription(sCode, oResourceBundle);
        }
    });
});

Excel导出时的应用示例 #

在创建sap.ui.export.Spreadsheet时，直接在列配置中使用格式化后的逻辑：

exportToExcel: function() {
    const oTableData = this.getView().getModel().getData().yourTableData;
    const oResourceBundle = this.getOwnerComponent().getModel("i18n").getResourceBundle();
    const aExportColumns = [
        {
            label: "状态",
            property: "statusCode",
            // 直接调用格式化方法
            formatter: (sCode) => this.formatter.serviceCoderDescription(sCode, oResourceBundle)
        },
        // 其他列配置...
    ];

    const oExportSettings = {
        workbook: { columns: aExportColumns },
        dataSource: oTableData,
        fileName: "表格数据导出.xlsx"
    };

    new sap.ui.export.Spreadsheet(oExportSettings).build();
}

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