angularjs - 複数の promise を使用して AngularFire でデータをフェッチする - 無限ループ

Question

作成中のアプリに Firebase と AngularFire を使用しようとしています。私は確かにAngularとFirebaseの初心者なので、助けていただければ幸いです。

Firebase には次のデータベース構造があります。

エピック
- エピック 1
  - ID
  - タイトル等
- エピック2
  - ID
  - タイトル等
ユーザー
- ユーザー 1
  
  -アクティブなエピソード
  - アクティブな叙事詩 1
  - アクティブな叙事詩 2

次のページでは、データベース内の各エピックの ng-repeat を示しています。各エピックにはボタンの列があり、そのうちの 1 つが問題を引き起こしています。現在のユーザーがすでにエピックを開始している場合 (たとえば、エピックがそのユーザーの「activeepics」に表示される場合)、ボタンには「Tap Out」と表示されます。エピックがユーザーのアクティブなエピックにない場合は、「開始」と表示されます。

ボタンは、ボタンのラベルに応じて、クリックされたときに異なることを行う必要があります。したがって、ボタンのラベルが「開始」と表示されている場合、アプリはエピックを現在のユーザーの「activeepics」に追加し、ボタンのラベルを「Tap Out」に変更する必要があります。対照的に、ボタンラベルが「Tap Out」の場合、アプリは「activeepics」からエピックを削除し、ボタンラベルを「Start」に戻す必要があります。

しかし、私はあらゆる種類の奇妙な振る舞いをしています。1 や 0 などのダミー ID を使用すると、アプリは正しいボタンラベルを表示します。ただし、Firebase で生成された ID でエピックを追加すると、すべてのラベルが「開始」にリセットされます。また、アプリが各エピックを複数回ループしていることにも気付きました (表示される各エピックのデバッグ console.log を入力しました)。

問題は、Firebase データを $scope にバインドした後に複数の promise オブジェクトがあることだと思います。できれば助けてください！

コードは次のとおりです。

意見

<div ng-repeat="(name,epic) in epics | filter:search | orderBy:order | filter:{category:category}" class="epic">
        <div>

                <div class="small-block-grid-3 epicActions">
                    <li><a href="#"> Remix </a></li>
                    <li><a href="#/share"> Share </a></li>
                    <li><a href="#" ng-click="handleLabel(name)" prevent> {{getLabel(name)}} </a></li>
                </div>
            </ul>
        </div>  
    </div>

コントローラ

$scope.desiredUser = UserService.getCurrentUser();

        var ref = new Firebase("https://epicly.firebaseio.com/epics");
        angularFire(ref, $scope, 'epics');

        var ref2 = new Firebase("https://epicly.firebaseio.com/users");
        angularFire(ref2, $scope, 'users').then(function(){

                for (var i = 0; i<$scope.users.length; i++){
                    if($scope.users[i].email === $scope.desiredUser){
                        $scope.currUser = $scope.users[i];
                    }
                }


            var ref3 = new Firebase("https://epicly.firebaseio.com/users/" + $scope.currUser.id + "/activeepics");
            angularFire(ref3, $scope, 'activeEpics').then(function(){

                console.log($scope.activeEpics);
                $scope.getLabel = function(epic){
                    console.log(epic);
                    for(var i = 0; i < $scope.activeEpics.length; i++){
                        if ($scope.activeEpics[i].id === epic) {
                            return "Tap Out";
                        } 
                    }
                    return "Start";
                }   

                $scope.handleLabel = function(name){
                    var label = $scope.getLabel(name);
                    if(label === "Tap Out"){
                        //remove from active epics
                    } else {
                        //add to activeepics
                        $scope.toAdd = {"id": name}
                        $scope.activeEpics.push($scope.toAdd);
                    }
                }
            });
        });

score 0 · Accepted Answer

あなたの問題の一部は、オブジェクトを配列であるかのように繰り返し処理しようとしている可能性があると思います。連続した数値 ID (0、1 など) を使用して Firebase にデータを保存すると、AngularFire はデータを配列のように扱います。キー (Firebase.push() で作成されたものなど) を使用する場合、AngularFire はデータをキーと値の辞書のように扱います。

angularFire変数が事前にあると予想されるデータ型を指定するので、$scope.users = []and$scope.activeEpics = {}を挿入するか、場合によっては、を呼び出す前AngularFire()にオブジェクトを調べて、実際に辞書または配列であるかどうかを確認し、反復を変更しますメソッドを適切に。

score 0 · Accepted Answer

最初に差し迫った質問に答えるには:

"Start"を追加すると、すべてのラベルがにリセットされるのはなぜepicですか?

あなたのメソッドは、 promiseの結果である$scope.getLabelを繰り返し処理しようとしています。ただし、配列ではなくオブジェクトであるため、インデックスやプロパティはありません。たとえそうであったとしても、仮想の結果の配列要素には、期待どおりのプロパティがありません。代わりに、ref のと比較する refのを探しています。特定の名前がオブジェクトに存在するかどうかを知りたいだけなので、これは実際にあなたの人生を簡素化します。そのため、そのメソッドは次のようになります。$scope.activeEpicsangularFire$scope.activeEpics.lengthidname()activeEpicname()epicepicactiveEpics
```
$scope.getLabel = function(epicName){
  var labelText = $scope.activeEpics[epicName] ? "Tap Out" : "Start";
  return labelText;
}
```
現状では、反復は実行されておらず、すべてがに戻ります"Start"。
$scope.getLabel関数が何度も実行されるのはなぜですか?

これは AngularJS 監視システムの機能です。ビューがビューを変更するメソッドを呼び出しているため、監視が再度実行され、メソッドが再度トリガーされます (やや大雑把に言えば)。ラベルが必要な叙事詩。より良い説明については、このSOの回答を参照してください。

いくつか一般的な提案をするとすれば、あなたはメールでユーザーを見つけるのにやや回り道をしているように見えます。こちらで説明されているように、Firebase プライオリティシステムを使用して、同じことをよりエレガントに行うこともできます。書式設定を強化し、変数とパラメーターのより明示的な名前を全面的に使用すると、コードをたどるのも簡単になります。ちょうど私の2セント。幸運を！

angularjs - 複数の promise を使用して AngularFire でデータをフェッチする - 無限ループ

2 に答える 2

Related

Reference