2017-01-04 5 views
0

私は角度uiグリッドライブラリを使用しており、カスタムのドロップダウンフィルターを作成しようとしています。このフィルタは、特定の列に対してのみ適用できます。その理由は、列に対して動的にアクセスできるようにループを記述した理由です。各特定の列に対して、私のフィルタの値を取得するための私の角度的なサービスをAPIに要求し、応答が成功した場合は、返されたデータIDと各列のプロパティIDを比較し、フィルタ値を入力します。問題はthen機能の内側に表示されます可変サービスは、角度サービス内のクロージャーからアクセスできます

、IDEが私を示して警告

変更可能な変数は閉鎖

と何も動作then関数の内部からアクセス可能です。

私はここで複数のトピックを読んで、自己呼び出し関数を実行する必要があることを知っていますが、うまく機能しません。

私のミスはどこですか?事前のおかげで

コード

for (var i = 0; i < $scope.columns.length; i++) { 

         // ===== rebuild columns tree ===== 

         var execute_ids = []; 

         angular.forEach($scope.columns[i].property, function(){        
          if ($scope.columns[i].property.strict === true){ 

           if(execute_ids.indexOf($scope.columns[i].property.propertyTypeId) === -1){ 
            execute_ids.push($scope.columns[i].property.propertyTypeId); 

            lovServices.customPropFilterValue(execute_ids) 
             .then(function (response) { 
              (function() { 
              if (response.id == $scope.columns[i].property.propertyTypeId){ 

               $scope.filter.push({ 
                value: data.value, 
                label: data.value 
               }); 

               $scope.columns[i].filter = { 
                type: uiGridConstants.filter.SELECT, 
                condition: uiGridConstants.filter.EXACT, 
                selectOptions: $scope.filter 
               }; 
              } 
              })() 
             }); 
           } 
          } 
         }); 

        } 

コードの本来の一部

lovServices.customPropFilterValue(execute_ids) 
             .then(function (response) { 
              if (response.id == $scope.columns[i].property.propertyTypeId){ 

               $scope.filter.push({ 
                value: response.value, 
                label: response.value 
               }); 

               $scope.columns[i].filter = { 
                type: uiGridConstants.filter.SELECT, 
                condition: uiGridConstants.filter.EXACT, 
                selectOptions: $scope.filter 
               }; 
              } 
             }); 

EDIT

I用いる溶液@JuanToninaによって提供され、警告がなくなっているが、それが登場別の問題。 then関数の内部iは、あなたはすぐに、呼び出される関数式、または略して生命維持を持っているので、問題が関連している可能性が

(function (i) { /* note that the lovServices call is INSIDE the IIFE*/ 

      console.log($scope.columns[i].property.propertyTypeId) 

// this console log returns correct ids (120, 123, 194) 

      lovServices.customPropFilterValue(execute_ids) 
       .then(function (response) { 

        console.log($scope.columns[i].property.propertyTypeId) 

// this console log returns wrong ids (120, undefined, 114) 

        if (response.id == $scope.columns[i].property.propertyTypeId) { 

         $scope.filter.push({ 
          value: data.value, 
          label: data.value 
         }); 

         $scope.columns[i].filter = { 
          type: uiGridConstants.filter.SELECT, 
          condition: uiGridConstants.filter.EXACT, 
          selectOptions: $scope.filter 
         }; 
        } 
       }); 
     })(i) 
+0

iFEをIIFE '(function(i){// code})のパラメータとして渡す必要があります(i ) ' –

+0

@JuanToninaまだ何も' lovServices.customPropFilterValue(execute_ids) .then(機能(応答){ (機能(I){// 私OCDE })は、(i); を}); ' – antonyboom

+0

申し訳ありませんが、ちょうどあなたのIIFEは '.then'部分だけを包むことに注意してください。あなたのコードは次のようになります: 'for(var i ...){(function(i){//ループの内容全体})(i)} ' これは、変数' i'がコールバックで使用される前に変更されているためです。副作用として、もしあなたがes6を使っているなら 'for(let i = 0 ...)'を実行すると問題が解決されます –

答えて

1

コメントは私の言いたいことを示すのに十分ではないので、これを回答として追加します。

あなたのコードは次のようになります。

for (var i = 0; i < $scope.columns.length; i++) { 

// ===== rebuild columns tree ===== 

var execute_ids = []; 

angular.forEach($scope.columns[i].property, function() { 
    if ($scope.columns[i].property.strict === true) { 

     if (execute_ids.indexOf($scope.columns[i].property.propertyTypeId) === -1) { 
      execute_ids.push($scope.columns[i].property.propertyTypeId); 

      (function (i) { /* note that the lovServices call is INSIDE the IIFE*/ 
       lovServices.customPropFilterValue(execute_ids) 
        .then(function (response) { 
         if (response.id == $scope.columns[i].property.propertyTypeId) { 

          $scope.filter.push({ 
           value: data.value, 
           label: data.value 
          }); 

          $scope.columns[i].filter = { 
           type: uiGridConstants.filter.SELECT, 
           condition: uiGridConstants.filter.EXACT, 
           selectOptions: $scope.filter 
          }; 
         } 
        }); 
      })(i) 
     } 
    } 
}); 

} 

この理由は、あなたの変数iがコールバックで使用される前に変更されていることです。副題として、(let i = 0;...)を実行すると問題が解決する

+0

更新された質問を確認してください – antonyboom

+0

'console.log($ scope.columns [i] .property.propertyTypeId)の代わりに' i'を記録してみてください。 ''私が実際に間違っているかどうかを確認する '' $ scope.columns'を使っていくつかの操作をしているように見えるので、全く別の問題かもしれません –

+1

あなたは正しいです、もう1つの列が追加され、列の順序が変更されたので、今すぐtは良いです、ありがとうございました! – antonyboom

0

間違った値を返します。そして、作成直後に実行されます。

.then()メソッドの内部から削除しても問題ありません。

(function() { 

})(); 
+0

これは以前のやり方ではうまくいかなかった '.then(function(response){ if(response.id == $ scope.columns [i] .property.propertyTypeId){' – antonyboom

+0

これは重複が可能です:http://stackoverflow.com/questions/34689730/wait-for-promises-inside-of –

関連する問題