Angular 组件不适用于 Promise 和 Service

Question

Angular 组件调用服务时遇到了一个非常奇怪的问题。 例如，我有一个简单的服务，里面有一些模型数据作为数组。我添加了两种方法，一种是同步的，一种是异步的，它返回一个承诺（如果我理解正确的话）。 现在有一个角度组件，它在示例应用程序中加载得很好。 在前端我有两个按钮，一个用于服务中的每种方法。 如果我现在按下按钮“btn1”，列表加载良好，一切正常。 如果我现在按下按钮“btn2”，我会在控制台中看到服务正确返回所有数据，但不会加载前端中的列表。

服务

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;
        }
    );
}

我也尝试过这个服务调用，但它也返回了一个 promise 对象。

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

谁能帮我找到解决办法？

Answer 1

this.items = response;

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