Question

Angular Components调用服务时遇到了一个非常奇怪的问题。例如，我有一个简单的服务，其中一些模型数据作为一个数组。我添加了两个方法，一个是同步，一个是异步，它们返回一个promise（如果我理解的话）。现在有一个角度组件，它在一个示例应用程序中很好地加载。在前端，我有两个按钮，一个用于服务中的每个方法。如果我现在按下按钮“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）保存上下文，或者如果有可用的话，请使用箭头功能。

Angular Components不适用于Promise和Service

1 个答案: