javascript 过滤器：notarray 预期的数组，但收到：0
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34175783/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
filter:notarray Expected array but received: 0
提问by Saurabh Kumar
controller
控制器
@RequestMapping(value = "/graphs", method = RequestMethod.GET, produces = MediaType.APPLICATION_JSON_VALUE)
public Collection<Graph> getSkeletonGraph()
{
log.debug("REST request to get current graphs");
return graphService.getSkeletonGraphs();
}
Angular call
角度调用
$scope.graphs = [];
Graph.getGraphs().$promise.then(function(result)
{
$scope.graphs = result;
});
angular.module('sampleApplicationApp').factory('Graph', function($resource)
{
return {
getGraphs: function() {
return $resource('api/graphs/:id').query();
}
};
})
I am not sure why using the filter i get the exception.
我不确定为什么使用过滤器时会出现异常。
looked also in angular doc https://docs.angularjs.org/error/filter/notarrayMy result is array but not sure why I am getting such exception.
还查看了 angular doc https://docs.angularjs.org/error/filter/notarray我的结果是数组，但不确定为什么会出现这种异常。
Sample result from backend i am getting.
我得到的后端示例结果。
[{"id":"135520b0-9e4b-11e5-a67e-5668957d0149","area":"Bingo","models":[],"enumerateds":[]},{"id":"0db925e0-9e53-11e5-a67e-5668957d0149","area":"jin","models":[],"enumerateds":[]},{"id":"7a717330-9788-11e5-b259-5668957d0149","area":"Product","models":[],"enumerateds":[]},{"id":"402d4c30-980f-11e5-a2a3-5668957d0149","area":"fgfgfg","models":[],"enumerateds":[]},{"id":"404b77b0-9e53-11e5-a67e-5668957d0149","area":"olah","models":[],"enumerateds":[]},{"id":"cd071b10-9e52-11e5-a67e-5668957d0149","area":"lolo","models":[],"enumerateds":[]},{"id":"d9808e60-9710-11e5-b112-5668957d0149","area":"catalog","models":[],"enumerateds":[]},{"id":"2aaca9f0-97e2-11e5-91cd-5668957d0149","area":"btg","models":[],"enumerateds":[]},{"id":"955e9ed0-978c-11e5-93fd-5668957d0149","area":"promotions","models":[],"enumerateds":[]},{"id":"1e441d60-980f-11e5-a2a3-5668957d0149","area":"hjuhh","models":[],"enumerateds":[]},{"id":"fb96dfe0-978d-11e5-93fd-5668957d0149","area":"voucher","models":[],"enumerateds":[]}]
html
html
<li ng-repeat="g in graphs track by $index | filter:searchText"></li>
回答by Tarun Dugar
The problem is occurring because you are using track by $indexbefore you are applying your filter. To resolve this, change your expression to:
出现问题是因为您track by $index在应用过滤器之前正在使用。要解决此问题，请将您的表达式更改为：
<li ng-repeat="g in graphs | filter:searchText track by $index"></li>
The track byexpression should always be at the last, after all your filters. Its a rule mentioned in the docs: ngRepeat
track by在所有过滤器之后，表达式应始终位于最后。它在文档中提到的规则：ngRepeat
Explanation:
解释：
When you don't use track by $indexin ngRepeat, the input for all the filters used is the array, that is, if its
当你不使用track by $indexin 时ngRepeat，所有使用的过滤器的输入是数组，也就是说，如果它
ng-repeat="item in items | filter1 | filter2",
then itemsis the input passed to the filters by default and the filtering is done on this input.
然后items是默认情况下传递给过滤器的输入，并在此输入上完成过滤。
However, when you use track by $index, the input to the filters becomes $indexinstead of itemsand therefore the error:
但是，当您使用 时track by $index，过滤器的输入变为$index而不是，items因此出现错误：
Expected array(read: items) but received 0(read: $index).
预期的数组（读取：项目）但收到 0（读取：$index）。
Therefore, to counter this, the array is first passed through all the filters and the filtered result is used with track by $index.
因此，为了解决这个问题，数组首先通过所有过滤器，过滤后的结果与 一起使用track by $index。
Hope this clears it up.
希望这能解决问题。
回答by Vivek
You should always use track byat the end of expression
你应该总是track by在表达式的末尾使用
<li ng-repeat="g in graphs | filter:searchText track by $index"></li>
Since while evaluating an expression for ng-repeatangular needs the final result for track by to work. If you provide it at the end, your filter will be applied and track byis computed on final output. You can see the source code at angular docs.
因为在评估ng-repeatangular的表达式时需要最终结果以便 track by 工作。如果您在最后提供它，您的过滤器将被应用并track by在最终输出上计算。您可以在 angular docs 中查看源代码。
According to the documentation of ng-repeat
根据文档 ng-repeat
If you are working with objects that have an identifier property, you should track by the identifier instead of the whole object. Should you reload your data later, ngRepeat will not have to rebuild the DOM elements for items it has already rendered, even if the JavaScript objects in the collection have been substituted for new ones. For large collections, this signifincantly improves rendering performance. If you don't have a unique identifier, track by $index can also provide a performance boost.
如果您正在处理具有标识符属性的对象，则应按标识符而不是整个对象进行跟踪。如果您稍后重新加载数据，ngRepeat 将不必为它已经呈现的项目重建 DOM 元素，即使集合中的 JavaScript 对象已被新对象替换。对于大型集合，这显着提高了渲染性能。如果您没有唯一标识符，按 $index 跟踪也可以提高性能。
