javascript - AngularJS无法读取未定义的属性 'releasesList'

Question

我试图让我的代码工作，但我的运气为零。这是我的代码:

class ReleasesController{
    constructor(API,$rootScope,$scope){
        'ngInject';
        this.$rootScope = $rootScope;
        this.$scope = $scope;
        this.API = API;
    }

    $onInit(){
        this.releasesList= [];
        this.API.all(this.$rootScope.type).get('').then((response) => {
            _.each(response, function (release) {
                _.each(release.releases, function (videorelease) {
                    this.releasesList.push({
                        name: release.name,
                        image: release.image,
                        views: videorelease.views,
                        hash: videorelease.hash,
                        episode: videorelease.episode
                    });
                });
            });
        })
    }
}

export const ReleasesComponent = {
    templateUrl: './views/app/components/releases/releases.component.html',
    controller: ReleasesController,
    controllerAs: 'rs',
    bindings: {}
};

这是错误:

TypeError: Cannot read property 'releasesList' of undefined
    at eval (eval at <anonymous> (http://website.dev/js/final.js:127247:1), <anonymous>:33:21)
    at Function._.each._.forEach (http://website.dev/js/final.js:61512:9)
    at eval (eval at <anonymous> (http://website.dev/js/final.js:127247:1), <anonymous>:32:15)
    at Function._.each._.forEach (http://website.dev/js/final.js:61512:9)
    at eval (eval at <anonymous> (http://website.dev/js/final.js:127247:1), <anonymous>:31:11)
    at processQueue (http://website.dev/js/final.js:16648:37)
    at http://website.dev/js/final.js:16692:27
    at Scope.$eval (http://website.dev/js/final.js:17972:28)
    at Scope.$digest (http://website.dev/js/final.js:17786:31)
    at Scope.scopePrototype.$digest (chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:1364:23) Possibly unhandled rejection: {}

我尝试调试它，但不知道为什么该变量未定义。谁能给我解释一下吗？

Answer 1

documentation关于箭头函数的说明:

An arrow function expression has a shorter syntax than a function expression and does not bind its own this, arguments, super, or new.target. These function expressions are best suited for non-method functions, and they cannot be used as constructors.

意味着，箭头函数将有助于子对象/函数上没有唯一的对象实例 -> 您的子对象/函数将保留您的父对象实例。自 ECMAScript6 以来这是可能的，而且它绝对很好。默认情况下，您的父实例 this 在 JavaScript 中的其他对象/函数中不可用，但通过使用箭头函数，您的父对象参数将被解析为您的子对象/函数。

$onInit(){
    this.releasesList= [];
    this.API.all(this.$rootScope.type).get('').then((response) => {
        _.each(response, (release) => {
            _.each(release.releases, (videorelease) => {
                this.releasesList.push({
                    name: release.name,
                    image: release.image,
                    views: videorelease.views,
                    hash: videorelease.hash,
                    episode: videorelease.episode
                });
            });
        });
    })
}

在 ECMAScript6 之前，您需要使其与“全局”函数 var 一起使用，例如 self = this，其中 var self 存储您的对象实例并可用作全局变量在你的子函数/对象中:

$onInit(){

    this.releasesList= [];
    var self = this;

    this.API.all(this.$rootScope.type).get('').then(function (response) {
        _.each(response, function (release) {
            _.each(release.releases, function (videorelease) {
                self.releasesList.push({
                    name: release.name,
                    image: release.image,
                    views: videorelease.views,
                    hash: videorelease.hash,
                    episode: videorelease.episode
                });
            });
        });
    })
}