filter:notarray应为数组，但收到的却是:0

Question

控制器

    @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();
    }

角度呼叫

    $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();
      }
     };
    })

我不知道为什么使用过滤器会得到异常。

看起来也很有棱角https://docs.angularjs.org/error/filter/notarray我的结果是数组，但不确定为什么我会得到这样的异常。

我从后台得到的示例结果。

[{"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

<li ng-repeat="g in graphs track by $index | filter:searchText"></li>

Answer 1

出现此问题是因为在应用筛选器之前使用了track by $index。要解决此问题，请将您的表达式更改为：

<li ng-repeat="g in graphs | filter:searchText track by $index"></li>

track by表达式应始终位于所有筛选器之后的最后。这是文档中提到的一条规则：ngRepeat

解释：

当您在ngRepeat中不使用track by $index时，所有使用的过滤器的输入都是数组，也就是说，如果它的

ng-repeat="item in items | filter1 | filter2", 

则CCD_ 5是默认情况下传递给滤波器的输入并且对该输入进行滤波。

但是，当您使用track by $index时，过滤器的输入将变为$index，而不是items，因此会出现错误：

应为数组（读取：项），但收到0（读取：$index）。

因此，为了应对这种情况，首先使数组通过所有滤波器，并将滤波结果与track by $index一起使用。

希望这能澄清问题。

Answer 2

您应该始终在表达式的末尾使用track by

<li ng-repeat="g in graphs | filter:searchText track by $index"></li>

因为在评估ng-repeat角度的表达式时，需要跟踪的最终结果才能工作。如果您在最后提供它，将应用您的过滤器，并在最终输出中计算track by。您可以在angular文档中看到源代码。

根据ng-repeat 文件

如果使用具有标识符属性的对象，则应该通过标识符而不是整个对象进行跟踪。你应该稍后重新加载数据，ngRepeat将不必重新生成DOM元素，即使JavaScript集合中的对象已被替换为新对象。对于大型集合，这显著提高了渲染性能。如果您没有唯一的标识符，trackby$index也可以提供性能提升。