ng-repeat 陷入无限循环 angularfire 8.2 [英] ng-repeat stuck in infinite loop angularfire 8.2

问题描述

我想弄清楚为什么这个 ng-repeat 语句会无限运行.Item.members 的长度为 2 并包含 userIds = true

<div ui-tree="options" class="teamlist"><ol ui-tree-nodes ng-model="teams" class="panel-teams"><li ui-tree-node ui-tree-handleng-repeat="团队中的项目"ng-include="'items_renderer.html'"></ol>

$scope.getMember = (memberId) ->memberobj = fbutil.syncObject('users/' + memberId)memberobj.$loaded().then (ref) ->$scope.teamUser.push ref.nameconsole.log $scope.teamUser返回 $scope.teamUser

它只会无限期地运行.

[斯文沃尔特"，斯文沃尔特"，斯文沃尔特"，斯文沃尔特"，斯文沃尔特"，斯文沃尔特"，斯文沃尔特"，斯文沃尔特"，斯文沃尔特"，雅虎, "雅虎", "雅虎", "雅虎", "雅虎", "雅虎", "雅虎", "雅虎", "雅虎", "斯文·沃尔特", "雅虎", "斯文·沃尔特", "雅虎"、斯文沃尔特"、雅虎"……]

那么我怎么能限制它只返回 ["Sven Woldt", "Yahoo"]

感谢您的帮助！

解决方案

每次 Angular 渲染这个 <span>{{ getMember(memberId) }}</span>重新)从 Firebase 加载该成员，进而触发重新渲染.

你的流程是这样的:

1. Angular 开始呈现您的视图
2. Angular 调用 getMember
3. getMember 开始从 Firebase 加载数据
4. 在某些时候加载数据并执行您的then
5. 您将一个新对象推送到 $scope，然后
6. 告诉 Angular 重新渲染你的视图，所以我们回到第 1 步

你的 getMember 代码应该检查它之前是否已经加载过这个成员.如果是这样，它不应该尝试重新加载它 - 或者至少不要再次将它推入 $scope.

I'd like to figure out why this ng-repeat statement runs infinite. Item.members has a length of 2 and contains userIds = true

<script type="text/ng-template" id="items_renderer.html">
     <label>
       <span class="team-description" ng-show="!item.editing">{{item.name}}</span>

       <label ng-repeat="memberId in item.members">
         <span>{{ getMember(memberId) }}</span>
       </label>
     </label>
</script>


 <div ui-tree="options" class="teamlist">
     <ol ui-tree-nodes ng-model="teams" class="panel-teams">
         <li ui-tree-node ui-tree-handle
          ng-repeat="item in teams"
          ng-include="'items_renderer.html'">
         </li>
     </ol>
 </div>

$scope.getMember = (memberId) ->
  memberobj = fbutil.syncObject('users/' + memberId)
  memberobj.$loaded().then (ref) ->
    $scope.teamUser.push ref.name
    console.log $scope.teamUser
    return $scope.teamUser

It will just keep running indefinite.

["Sven Woldt", "Sven Woldt", "Sven Woldt", "Sven Woldt", "Sven Woldt", "Sven Woldt", "Sven Woldt", "Sven Woldt", "Sven Woldt", "Yahoo", "Yahoo", "Yahoo", "Yahoo", "Yahoo", "Yahoo", "Yahoo", "Yahoo", "Yahoo", "Sven Woldt", "Yahoo", "Sven Woldt", "Yahoo", "Sven Woldt", "Yahoo",…]

So how could I restrict this to only return ["Sven Woldt", "Yahoo"]

Thanks for your help!

解决方案

Every time Angular renders this <span>{{ getMember(memberId) }}</span> you end up (re)loading that member from Firebase, which in turn triggers a re-render.

Your flow is like this:

1. Angular starts to render your view
2. Angular calls getMember
3. getMember starts loading the data from Firebase
4. At some point the data is loaded and your then is executed
5. You push a new object onto the $scope, which in turn
6. Tells Angular to re-render your view, so we go back to step 1

Your getMember code should check if it has already loaded this member before. If it did, it shouldn't try to reload it - or at least not push it into the $scope again.

这篇关于ng-repeat 陷入无限循环 angularfire 8.2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！