Question

我正在尝试使用ng-repeat指令使用对API的角度请求来填充html表。首先加载html页面，然后发出请求以获取返回响应时填充表的数据。当我向ng-repeat指令添加过滤器时，表格被填充并且过滤器起作用，但是在我的chrome浏览器控制台中，我收到以下错误：

错误：[filter：notarray]预期的数组但收到了：{} http://errors.angularjs.org/1.4.3/filter/notarray?p0=%7B%7D 在REGEX_STRING_REGEXP（angular.js：68）在angular.js：18251 在Object.fn（app.js：185）在Scope。$ get.Scope。$ digest（angular.js：15683）在Scope。$ get.Scope。$ apply（angular.js：15951）在bootstrapApply（angular.js：1633）在Object.invoke（angular.js：4450） at doBootstrap（angular.js：1631）在bootstrap（angular.js：1651）在angularInit（angular.js：1545）

我已经在plunker上设置了一个样本，当样本运行时，错误也会显示在控制台中：

http://plnkr.co/edit/J83gVsk2qZ0nCgKIKynj？

html：

<!DOCTYPE html>
<html>
<head>
  <script data-require="angular.js@*" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
  <script data-require="angular-route@*" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-route.js"></script>
  <script data-require="angular-resource@*" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-resource.js"></script>
  <script type="text/javascript" src="example.js"></script>
  <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet" />
</head>
<body ng-app="inventoryManagerApp">
  <h3>Sample - Expected array error</h3> Filter
  <input type="text" id="quoteListFilter" class="form-control" ng-  model="search" />
  <div ng-controller="QuoteController">
    <table class="table table-bordered">
      <tbody>
        <tr>
          <th>Specification</th>
          <th>Quantity</th>
        </tr>
        <tr ng-repeat="quote in quotes | filter:search">
          <td>{{quote.SpecificationDetails}}</td>
          <td>{{quote.Quantity}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

javascript：

var inventoryManagerApp = angular.module('inventoryManagerApp', [
  'ngResource',
  'quoteControllers'
]);

var quoteControllers = angular.module('quoteControllers', []);

quoteControllers.controller("QuoteController", ['$scope', 'filterFilter', 'quoteRepository',
  function($scope, filterFilter, quoteRepository) {

     $scope.quotes = quoteRepository.getQuoteList().$promise.then(
            function (result) {
                $scope.quotes = result;
            },
            function () {
            }
        );
  }
]);

inventoryManagerApp.factory('quoteRepository',
  function($resource) {
    return {
      getQuoteList: function() {
        return    $resource('http://drbsample.azurewebsites.net/api/Quotes').query();
      }
    };
  });

这似乎与填充ng-repeat指令的数据有关，不能立即在页面加载时使用。当我在页面加载时使用json数据替换$ scope.quotes而不是从API请求数据时，不会出现错误。

Answer 1

问题出在这个任务上：

$scope.quotes = quoteRepository.getQuoteList().$promise.then(
        function (result) {
            $scope.quotes = result;
        },
        function () {
        }
    );

函数.then()返回另一个promise对象以允许链接：.then().then()，并且因为它返回一个对象，这就是您收到notarray错误的原因。

为避免引用错误，您可以先将$scope.quotes指定为空arrray，然后将结果分配给它。

$scope.quotes = [];
quoteRepository.getQuoteList().$promise.then(
        function (result) {
            $scope.quotes = result;
        },
        function () {
        }
    );

Answer 2

$scope.quotes = quoteRepository.getQuoteList().$promise.then(

这项任务毫无用处。只需删除行中的$scope.quotes =就可以解决您的问题。

promise.then返回一个对重复语句没用的对象。

Answer 3

$ http遗留承诺方法.success和.error已被弃用，将在Angular v1.6.0中删除。请改用标准.then方法。

现在.then方法返回带有几个元素的对象：数据，状态等。所以你需要使用response.data而不仅仅是响应：

$http.get('https://example.org/...')
  .then(function (response) {

    console.log(response);

    var data = response.data;
    var status = response.status;
    var statusText = response.statusText;
    var headers = response.headers;
    var config = response.config;

    console.log(data);

});

Answer 4

quoteRepository.getQuoteList().then(
    function (result) {
        $scope.quotes = result;
    },
    function () {
    }
);

Angularjs错误：[filter：notarray]预期数组但收到：{}带有ng-repeat

4 个答案: