Angularjs bootstrap typeahead无效：错误：[filter：notarray]

发布时间：2020-12-17 17:21:18 所属栏目：安全来源：网络整理

导读：我需要使用typeahead进行http调用来获取建议选项 $scope.getlist = function getListofNames(name) { return $http({ method: 'GET',url: '/v1/'+name,data: "" }).then(function(response){ if(response.data.statusMessage !== 'SUCCESS'){ response.error

我需要使用typeahead进行http调用来获取建议选项

$scope.getlist = function getListofNames(name) {
 return $http({
   method: 'GET',url: '/v1/'+name,data: ""
 }).then(function(response){

     if(response.data.statusMessage !== 'SUCCESS'){
         response.errorMessage = "Error while processing request. Please retry."
           return response;
     }

         else {
           return response.data.payload;
         }

       },function(response){
       response.errorMessage = "Error while processing request"
           return response;
       }
       );
}

response.data.payload是一个对象数组,它已成功获取但我收到此错误
错误：[filter：notarray] http://errors.angularjs.org/1.4.5/filter/notarray？

注意：我使用的是角度1.4.5和Bootstrap v3.1.1

解决方法

我猜你的typeahead标记看起来像这样：

<input [...] typeahead="item in getItems($viewValue) | filter: $viewValue">

为什么它不起作用：

异步提取项目数组时会发生此问题.在你的情况下,getItems函数被称为getListofNames,由于调用了$http,你的项目确实是异步获取的.因此,在发生错误时,getListofNames()仍然是未解析的promise对象,而不是名称数组.

你怎么能做这个工作：

从模板中删除过滤器.您应该在getItems中返回之前过滤该数组.理想情况下,您希望在服务器端进行过滤.实际上,服务器接收用户键入的子字符串(这是$viewValue参数),因此它具有过滤数组的所有数据.这样可以防止返回所有元素并缩短响应时间.
或者,您可以在承诺的回调中过滤客户端：

$scope.getList = function getListofNames(name) {
    return $http(...}).then(
        function(response){
            // filter response.data.payload according to 
            // the 'name' ($viewValue) substring entered by the user
            return filteredArray; // <- no need to pipe a filter in the template anymore
        }
    );
};

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!