角。js:13550类型错误:不能设置属性'people' of undefined。

I am learning angular+ES6 to code.

我正在学习角+ES6编码。

test.controller.js

test.controller.js

class TestSecIndexController {

    constructor (TestSecService,$q) {
        this.src = require('./../images/2.jpg');
        this._TestSecService = TestSecService;
        let promises = [
            this.getPeopleList()
        ];    
        $q.all(promises).then(function (){
            console.log(this.people);
        })  
    }    
    getPeopleList(){
        return this._TestSecService.getPeopleList().then(function(res){
            this.people = res.data; //line: 22
        });
    }

    static testSecIndexController(TestSecService,$q){
        return new TestSecIndexController(TestSecService,$q);
    }    
}    

TestSecIndexController.testSecIndexController.$inject = ['TestSecService','$q'];    
export default angular.module ('test2.index.controller', [])
    .controller ('testSecIndexController', TestSecIndexController.testSecIndexController)

If do this, there has an error :

如果这样做，就有一个错误:

angular.js:13550 TypeError: Cannot set property 'people' of undefined at index.controller.js:22

角。无法在index.controller.js:22处设置未定义的属性“people”

this.src can set successfully,why this.people can not?

这一点。src可以成功设置，为什么这样。人们可以不?

2 个解决方案

#1

your scoping is wrong.

你的范围是错误的。

this.src - the this in this case references the controller class youre constructing.
这一点。在本例中，这将引用您构造的控制器类。
this.people on line 22 references the function it is contained within.
这一点。第22行中的人引用了它包含在其中的函数。

I dont know angular really but you might need to do something like :

我真的不知道角，但你可能需要做一些类似的事情:

let promises = [
    this.getPeopleList()
];
let people = null;


getPeopleList(){
    let _this = this; //set _this equal to the parent scope
    return this._TestSecService.getPeopleList().then(function(res){
        //now _this.people refers to the already defined people of the constructor above
        _this.people = res.data; //line: 22 - 
    });
}

#2

There is a better way to set the lexical value of this using the new ES6 lambda => syntax. Change your code to use lambda as below and you will get the correct value of this:

有一种更好的方法可以使用新的ES6 lambda =>语法设置它的词法值。将代码更改为如下所示的lambda，您将得到这个值的正确值:

getPeopleList = () => {
    return this._TestSecService.getPeopleList().then(function(res){
        this.people = res.data; //line: 22
    });
}

The value of this is lexically set correctly within the constructor but not in other methods on the class. So you need to change all you methods to use => to have correct lexical value of this

它的值在构造函数中正确地设置，但在类的其他方法中不正确。所以你需要改变你所有的方法来使用=>来获得正确的词汇值。

#1