更新Angular组件回调函数中对象的属性

Posted 2023-02-23

【中文标题】更新Angular组件回调函数中对象的属性

【英文标题】：Update property of object in callback function of Angular component

【发布时间】：2016-09-08 05:12:14

【问题描述】：

我想创建一个新的 Angular compontent，它应该改变一个对象/模型的状态，然后调用定义的回调函数。

代码如下所示：

HTML

<status-circle status="obj.status" on-update="save(obj)"></status-circle>

statusCircle.js

angular.module('app').component('statusCircle', 
  templateUrl: '/views/components/statusCircle.html',
  bindings: 
    status: '=',
    onUpdate: '&'
  ,
  controller: function () 

    this.update = function (status) 
      if(this.status !== status) 
        this.status = status;
        this.onUpdate();
      
    ;

  
);

属性将正确更新（双向绑定有效）并调用 save 回调函数，但对象具有旧的状态属性集。

我的问题：如何在回调函数中更新对象？

JSFiddle：https://jsfiddle.net/h26qv49j/2/

【问题讨论】：

this 内部update 函数与外部this 不同，请参考此so question，这就是为什么您不更新实际status 变量的原因，它是不同的..

在我之前将其分配给变量时不会改变任何东西。属性将使用此代码正确更新，但回调函数是使用“旧”对象调用的。

你能附上 plunkr/fiddle 吗？

添加了 jsfiddle 链接！

no.. 这不是一个好方法...我希望您将 obj 对象传递给指令，而不是只发送状态，这样对象引用就会被传递给指令& 只要你改变它的任何价值..

【参考方案1】：

看起来你应该在 statusCircle.js 中更改

this.onUpdate();

到

this.onUpdate(status: status);

然后在 HTML 中改变

<status-circle status="obj.status" on-update="save(obj)"></status-circle>

到

<status-circle status="obj.status" on-update="save(status)"></status-circle>

最后......在你的控制器中，你的 save() 函数被放置

this.save = function(status) this.obj.status = status;