AngularJs Filter:生成notArray错误

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AngularJs Filter:生成notArray错误相关的知识,希望对你有一定的参考价值。

我的angularJS项目中有一个过滤器问题。

我们有一个简单的草稿功能,允许用户将大型表单的内容保存为数据库中的JSON字符串。然后,他们可以访问网站的某个部分以显示并继续处理这些表单。我想在该页面上为他们提供一个过滤器,以便按照他们保存草稿的日期进行过滤。

这是我的标记:

<div ng-controller="savedFormCtrl" ng-cloak id="saved-form-wrapper"
  class="border border-dark border-top-0 border-right-1 border-bottom-1
  border-left-1 px-0" ng-init="getSavedForms()"
>
  <!-- Search filters -->
  <form name="savedFormsFilterWrapper" layout="row" flex="35" layout-align="end center" class="toolbar-search">

    <!-- Date filter -->
    <md-input-container flex="80">
      <div class="text-light font-weight-bold float-left">Filter by saved date:</div>
      <md-tooltip style="font-size:1em;">Filter your saved HRTF's</md-tooltip>

      <md-datepicker name="dateFilter" class="hrtf-date savedFilterDatepicker"
       md-date-locale="myLocale" data-ng-model="savedFormFilters" ng-blur="setFilterDate()"
       md-placeholder="" md-open-on-focus 
       aria-label="Saved forms date filter">
      </md-datepicker>
    </md-input-container>

  </form>

  <!-- Saved forms body -->
  <div id="savedFormAcc" class="accordion col-md-12 pt-3">

  <!-- Accordion item Header -->
  <div class="card" ng-repeat="item in savedForms | filter:savedFormFilters">

    <div class="card-header savedFormItem" id="savedForm{{$index}}" data-toggle="collapse" data-target="#collapse{{$index}}">
      <md-button class="md-raised md-primary" data-toggle="collapse"
       data-target="#collapse{{$index}}" aria-expanded="false" 
       aria-controls="collapse{{index}}"
      >
        Form Saved on {{ item.savedOn }} - Click to expand
      </md-button>
    </div>

    <!-- Accordion body continues on below  -->

  </div>

</div>

我的JS:

(function () {
  'use strict';
  angular.module('hrtf')
    .controller('savedFormCtrl', ['$scope', '$window', 'formService',
      function savedFormCtrl($scope, $window, formService) {

        $scope.savedFormFilters = '';

        //Get users's saved forms
        $scope.savedForms = {};
        $scope.getSavedForms = function(){

          formService.getSavedForms()
          .then(saved => {
            saved.forEach( item =>{
              item.data_json = JSON.parse(item.data_json);
            });
            $scope.savedForms = saved;
            return $scope.savedForms;
         };
       }
     ]);
})();

现在,过滤器工作。但无论何时加载页面,都会出现20-50个错误,所有内容都有错误:[filter:notarray]预期数组但收到:{}

我需要做的就是为父对象savedOn:xxData Herexx值提供一个字符串值的简单过滤器。

我究竟做错了什么?

答案

事实证明,我和this post有类似的问题

基本上,我的ng-repeat和过滤器在相关模型加载之前进行了初始化。将模型初始化为空白数组,然后将过滤器作为promise链的一部分创建,可以实现:

//Get users's saved forms
$scope.savedForms = [];
$scope.getSavedForms = function(){
  formService.getSavedForms()
  .then(saved => {
    //Convert and format items here

    $scope.savedForms = saved;
    $scope.savedFormFilters = { savedOn: ''};
    return $scope.savedForms;

  }).catch(e => { console.error(e);
  });
};

非常基本,但我会留在这里,以防它将来帮助某人:)

以上是关于AngularJs Filter:生成notArray错误的主要内容,如果未能解决你的问题,请参考以下文章

Angularjs中的$filter

AngularJS学习之filter过滤器的用法

AngularJS的Filter用法详解

$filter 不是一个函数 AngularJS

AngularJS之Filter

angularjs中的filter(过滤器)