Question

我正在运行一个Angular应用程序，它从Web API服务中提取数据。 API将对象作为JSON返回，Angular服务（通过$ http.get（））将它们作为对象数组返回给控制器。很正常的东西。

我想要做的是为每个返回的对象添加一个名为＆＃34; Selected＆＃34;的属性。此属性纯粹用于GUI目的（是在UI中选择或不选择的对象），并且不需要以任何方式持久化。我认为最简单的事情就是遍历返回的对象数组并添加它。所以我的代码看起来像这样：

function getData() {
    myService.getData()
        .then(function(data) {
            $scope.myData = data.results;
            // Add a "Selected" property to each object
            $.each($scope.myData, function(item) {
                item.Selected = false;
            });
}

当它到达说明的行时，＆＃34; item.Selected = false＆＃34;它抛出一条错误信息，说＆＃34;无法分配给只读属性Selected＆＃34;。

我不清楚为什么＆＃34;选择＆＃34;是只读的？我不知道Angular在读取数据时是否会做一些时髦的对象处理？我在这做错了什么？或者我应该以完全不同的方式接近这个？

注意（我希望避免必须选择原始对象的一部分，因为它不代表与该对象相关的任何内容）。

Answer 1

使用underscorejs，

向对象添加属性

“each _.each（list，iteratee，[context]）Alias：forEach 迭代一系列元素，然后依次产生一个iteratee函数。如果传递了一个，则iteratee绑定到上下文对象。每次调用iteratee都会调用三个参数：（element，index，list）。如果list是JavaScript对象，则iteratee的参数将是（value，key，list）。返回链接列表。“

“extend _.extend（destination，* sources）将源对象中的所有属性复制到目标对象，然后返回目标对象。它是有序的，因此最后一个源将覆盖先前参数中同名的属性。“

$scope.myData = data.results;
// Add a "Selected" property to each object   

_.each($scope.myData, function(ent) {
    _.extend(ent, {
        Selected : false
    });
});

Answer 2

您的调试器screenshot实际上会为您提供比您发布的更有用的错误消息（强调我的）：

无法指定只读属性“已选择”为0

这表明您将获得一个数字作为item变量而不是对象（在本例中为0）。在严格模式下将属性分配给基元会抛出“无法分配给只读属性”错误。 （没有严格模式，它只是默默地失败。）

正如JcT在评论中指出的那样，这是因为$.each调用函数时传递了2个参数，索引优先，值为秒。请参阅documentation of $.each：

<强>回调

类型：函数（整数indexInArray，对象值）

因此，即使您将参数命名为item，它也会收到当前索引的值。这意味着只需将这个缺少的第一个参数添加到回调中即可修复代码，如下所示：

function getData() {
    myService.getData()
        .then(function(data) {
            $scope.myData = data.results;
            // Add a "Selected" property to each object
            $.each($scope.myData, function(index, item) { //index was added here!
                item.Selected = false;
            });
}

将属性添加到Angular对象

2 个答案: