web-dev-qa-db-ja.com

filter：notarray期待された配列であるが受信したもの：0

コントローラ

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

フィルターを使用すると例外が発生する理由がわかりません。

angular doc 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>
javascriptangularjsangularjs-directiveangularjs-scopeangularjs-ng-repeat
16
Saurabh Kumar

この問題は、フィルターを適用する前に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",

itemsはデフォルトでフィルターに渡される入力であり、フィルタリングはこの入力で行われます。

ただし、track by $indexを使用すると、フィルターへの入力はitemsではなく$indexになるため、エラーが発生します。

配列（読み取り：項目）が必要ですが、0（読み取り：$ index）を受け取りました。

したがって、これに対抗するために、配列は最初にすべてのフィルターに渡され、フィルターされた結果がtrack by $indexと共に使用されます。

これで解決することを願っています。

66
Tarun Dugar

式の最後に常にtrack byを使用する必要があります

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

ng-repeat angularの式を評価している間、track byが機能するためには最終結果が必要です。最後に指定すると、フィルターが適用され、track byが最終出力で計算されます。ソースコードはangular docsで見ることができます。

ng-repeatのドキュメントによると

識別子プロパティを持つオブジェクトを使用している場合、オブジェクト全体ではなく識別子で追跡する必要があります。後でデータをリロードする場合、ngRepeatは、コレクション内のJavaScriptオブジェクトが新しいオブジェクトに置き換えられた場合でも、既にレンダリングされたアイテムのDOM要素を再構築する必要はありません。大規模なコレクションの場合、これによりレンダリングパフォーマンスが大幅に向上します。一意の識別子がない場合、$ indexによる追跡もパフォーマンスを向上させることができます。

3
Vivek