AngularJS - 创建标签为 $translated 的对象数组答案

【问题标题】：AngularJS - create object array where label is $translatedAngularJS - 创建标签为 $translated 的对象数组
【发布时间】：2016-12-22 10:02:33
【问题描述】：

我有以下数组：

vm.roles = ['ROLE1', 'ROLE2', 'ROLE3', 'ROLE4'];

我需要这种形式的数组：

vm.translatedRoles = [{id:0, label:'Role1'}, {id:1, label:'Role2'}, ...]

因此我编写了这个函数来从 vm.roles 转移到 vm.translatedRoles。我现在的问题是 translatedRoles 保持为空，因此其中没有对象。有谁知道为什么？

function translateRoles() {
        var translatedRoles = [];
        for(var i = 0; i < vm.roles.length; i++) {
            $translate(vm.roles[i]).then(function(text) {
                var role = {};
                role.id = i;
                role.label = text;
                translatedRoles.push(role);
            });
        }
        return translatedRoles;
    }

【问题讨论】：

标签： angularjs translate

【解决方案1】：

那是行不通的。 $translate() 返回一个承诺。当翻译可用时，传递给 $translate 的函数将在稍后、异步执行。因此，返回语句发生在之前 translatedRoles 被函数填充。

你需要返回一个数组的promise，或者希望翻译已经可用并使用$translate.instant()：

function translateRoles() {
    var translatedRoles = [];
    for (var i = 0; i < vm.roles.length; i++) {
        translatedRoles.push({
          id: i,
          label: $translate.instant(vm.roles[i]);
        });
    }
    return translatedRoles;
}

【讨论】：

非常感谢您的完美回答