AngularJS - ラベルが$翻訳されたオブジェクトの配列を作成

Question

I次の配列があります。

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

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