AngularJS - создать массив объектов, где метка $ переведенный

Question

У меня есть следующий массив:

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

и мне нужна эта форма массива:

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

Поэтому я написал эту функцию для передачи от vm.roles до vm.translatedRoles. Моя проблема в том, что translationRoles остается пустым, поэтому в нем нет объектов. Кто-нибудь знает, почему?

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; 
    } 

Answer 1

Это не может работать. $ translate() возвращает обещание. Функция, переданная в $ translate, выполняется позже, асинхронно, когда переводы доступны. Таким образом, возвращается оператор возврата доtranslatedRoles заполняется функцией.

Вы должны вернуть обещание массива, или надеяться, что перевод уже доступны и использование $ 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; 
}