AngularJS 组件绑定一个函数答案

【问题标题】：AngularJS component binding a functionAngularJS 组件绑定一个函数
【发布时间】：2020-03-21 06:57:14
【问题描述】：

假设，我们试图使用 web api 从列表中删除一个项目。我们使用参数 - item 和 onRemove 创建了一个名为 remove-item 的子组件。单击一个项目时，我们想触发父组件的回调函数。根据代码，删除项目后不会调用onRemove。有人可以帮助我们找出错误并为我们提供正确的解决方案并提供说明。

remove.component.js
-------------------
this.RemoveItem = function (index) {
            var promise = productList.removeItem(parseInt(this.id));
            promise.then(function (response) {
                console.log("An item has been deleted");
                this.items=response.data;
            }, function (error) {
                console.log("An error has occurred while deleting the item:", this.id);
               
            });
            this.onRemove({
                $index: this.items
            });       
        }

【问题讨论】：

标签： angularjs angularjs-directive angularjs-controller angularjs-components angularjs-bindings

【解决方案1】：

我会避免使用“this”。不知道为什么你在 RemoveItem fn 中传递了索引参数，看不到你在这个范围内的任何地方使用它。无论如何，如果 productList.removeItem 返回 Promise，我们就可以调用 onRemove。我需要更多信息 - html 代码和您的删除 fn 代码，但还是试试吧。

  let vm = this;
  vm.RemoveItems = RemoveItem;
  vm.onRemove = onRemove;

  RemoveItem(index) {
                productList.removeItem(parseInt(this.id))
                .then(function (response) {
                    console.log("An item has been deleted");
                    vm.onRemove({$index: response.data});

                }, function (error) {
                    console.log("An error has occurred while deleting the item:", this.id);

                });      
            }
  onRemove(obj) {
    console.log(obj); 
//make your remove here
  }

【讨论】：