Angular 组件不适用于 Promise 和 Service

Question

我有一个关于 Angular 调用服务的组件的非常奇怪的问题。例如，我有一个简单的服务，其中包含一些模型数据作为内部数组。我添加了两种方法，一种是同步的，一种是异步的，returns 一个承诺（如果我理解正确的话）。现在有一个 angular 组件，可以很好地加载到示例应用程序中。在前端我有两个按钮，一个用于服务中的每个方法。如果我现在按下按钮 "btn1" 列表加载良好，一切正常。如果我现在按下按钮 "btn2"，我会在控制台中看到服务 returns 所有数据都正确，但不会加载前端列表。

服务

var myItems = [
  {id: 1, name: "item1"},
  {id: 2, name: "item2"}
];

function ItemsService($q) { // inject the $q service
    this.$q = $q;
}

ItemsService.prototype = {
    loadItems: function () {
        return myItems;
    },

    loadItemsAsync: function () {
        var $qme = this.$q; // if i do not this, "this.$q" is undefined
        return this.$q.resolve(myItems);
    }
};

module.exports = {
    ItemsService: ItemsService
}

控制器

function Foo(ItemsService) {
    this.itemsService = ItemsService;
}

Foo.prototype = {
    loadItems: function () {
        this.items = this.itemsService.loadItems();
    },
    loadItemsAsync: function () {
        this.itemsService.loadItemsAsync().then(
            function (response) {
                this.items = response;
                console.log('data->' + this.items + ' -> ' + this.items[0].name);
            },
            function (error) {
                console.log('error->' + error); // ignore
            }
        );
    }
};

组件HTML

<section>
    <button id="btn1" ng-click="$ctrl.loadItems()">Load</button>
    <button id="btn2" ng-click="$ctrl.loadItemsAsync()">Load Async</button>
    <ul>
        <li ng-repeat="item in $ctrl.items">{{item.id}} // {{item.name}}</li>
    </ul>
</section>

以后我想用服务调用替换"loadItemsAsync"服务方法中的代码，但实际上没有任何作用。

未来计划服务方式代码

loadTreasuriesAsync: function () {
    var $qme = this.$q;
    return this.$http.get(this.url).then(
        function (response) {
            return $qme.resolve(response.data);
        },
        function (error) {
            throw error;
        }
    );
}

我也试过这个服务调用，但它也是returns一个承诺对象。

loadItems: function () {
    return this.$http.get(this.url).then(function (response) {
        return response.data;
    });
},

谁能帮我找到解决办法？

Answer 1

this.items = response;

这在上下文中不再存在。尝试通过外部变量（即 _this）或使用箭头函数（如果有的话）先前保存上下文。

Angular 组件不适用于 Promise 和 Service

Angular Components does not work with Promise and Service

angularjs

angular-promise

angular-components