AngularJS 无法读取未定义的属性“releasesList”答案

【问题标题】：AngularJS cannot read property 'releasesList' of undefinedAngularJS 无法读取未定义的属性“releasesList”
【发布时间】：2017-03-26 22:18:24
【问题描述】：

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

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: {}

我尝试调试它，但我不知道为什么变量是undefined。谁能解释一下？

【问题讨论】：

我认为 this.releasesList 改变了 _.each 函数内部的上下文，这意味着它是未定义的。尝试使用箭头函数。
使用胖箭头=> 函数来保留this 绑定。
在 ngOnInit() 中使用它之前，您能否在构造函数之前声明 releaseList 并查看是否有区别？ releasesList;
谢谢大家箭头功能正常工作。

标签： javascript angularjs ecmascript-6

【解决方案1】：

documentation 提到了箭头函数：

箭头函数表达式的语法比函数短表达式并且不绑定它自己的 this、arguments、super 或新目标。这些函数表达式最适合非方法函数，它们不能用作构造函数。

意味着，箭头函数将有助于在子对象/函数上没有唯一的对象实例 -> 您的子对象/函数将保留您的父对象实例。这是可能的，因为 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 之前，您需要使其与 self = this 之类的“全局”函数 var 一起工作，其中 var self 存储您的对象实例，并可在您的子函数/对象中作为全局 var 使用：

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

【讨论】：