无法在 angularjs 中调用 Object.keys

Posted 2023-02-22

【中文标题】无法在 angularjs 中调用 Object.keys

【英文标题】：Unable to call Object.keys in angularjs

【发布时间】：2014-10-07 14:18:51

【问题描述】：

我正在使用 UI.Bootstrap 手风琴，并且我已经像这样定义了我的标题：

<accordion-group ng=repeat="(cname, stations) in byClient">
    <accordion-heading>
         cname  <span class="pull-right">  Object.keys(stations).length  Stations</span>
    </accordion-heading>

当显示 Object.keys(stations).length 时解析为空。如果我在我的控制器中放入相同长度的调用，我会得到预期的计数。有什么东西阻止方法调用在 AngularJS 中工作？

使用stations 的手风琴的其余部分按预期运行，因此我知道它已正确填充。 byClient 数据结构基本上是这样的：

    "Client Name" : 
        "Station Name": [
            ...,
            ...
        ]
    
 

【问题讨论】：

试试 (stations | keys).length stations

【参考方案1】：

是的，那是因为 Object 是 window/global 的一部分，并且 angular 无法根据范围评估该表达式。当您在绑定角度中指定Object.keys 时，尝试根据$scope 对其进行评估，但找不到它。您可以将object.keys 的引用存储在rootScope 中的某个实用程序中，并在应用程序的任何位置使用它。

类似这样的：-

angular.module('yourApp',[deps...]).run(function($rootScope)
  //Just add a reference to some utility methods in rootscope.
  $rootScope.Utils = 
     keys : Object.keys
  

  //If you want utility method to be accessed in the isolated Scope 
  //then you would add the method directly to the prototype of rootScope 
  //constructor as shown below in a rough implementation.

  //$rootScope.constructor.prototype.getKeys = Object.keys;

);

并将其用作：-

<span class="pull-right">  Utils.keys(stations).length  Stations</span>

这将可用于除独立作用域之外的任何子作用域。如果您打算在隔离作用域上执行此操作（例如：- 隔离作用域指令），则需要在作用域上添加 Object.keys 的引用，或者当您在作用域上公开一个将返回长度的方法时。

或者更好的是，创建一个格式过滤器来返回密钥长度并在任何地方使用它。

app.filter('keylength', function()
  return function(input)
    if(!angular.isObject(input))
      throw Error("Usage of non-objects with keylength filter!!")
    
    return Object.keys(input).length;
  
);

然后做：-

 stations | keylength 

Demo

【讨论】：

正如我所说的那样 +1

非常好。你给出了两个完美的解决方案！谢谢:)

如果您使用的是隔离作用域，则需要使用 $root.Utils.keys(stations).length

@AJRichardson 您在此处提出的观点非常好。您可以做的不是将其添加到 rootScope 实例中，而是将其添加到原型中。即$rootScope.constructor.prototype.getKeys = Object.keys。然后它也应该在隔离范围内可用。类似于我所做的here

为什么这在 Angular 中默认不存在，非常有用！

【参考方案2】：

使用函数确定对象属性的数量：

$scope.keyLength = function (obj) 
    return Object.keys(obj).length;

并使用：

 keyLength(myObj) 

【参考方案3】：

我认为 过滤器 是 AngularJS 在模板代码中处理结构的最常用方式：

angular.module('app.filters').filter('objectKeysLength', [function() 
    return function(items) 
        return Object.keys(items).length;
    ;
]);

angular.module('app.filters').filter('objectKeys', [function() 
    return function(item) 
        if (!item) return null;
        var keys = Object.keys(item);
        keys.sort();
        return keys;
    ;
]);

【参考方案4】：

如果有人搜索 angular 2 和更高的解决方案。它现在拥有keyvalue 管道，可用于对对象进行交互

【参考方案5】：

我无法在 AngularJS 1.6 中获得任何其他答案。什么对我有用 使用$window 访问Object.keys 像这样$window.Object.keys( 'a': 1, 'b': 2 )