AngularJs2：如何调试服务调用？（es6语法）

Question

情况：

我刚学Angular2。我想调试对服务的调用。

服务已正确调用，正如我在视图中看到的那样。

我还想记录保存结果的变量的内容，但它无法正常工作，除非。

服务：

export class ListService 
{
    getList() 
    {
        return Promise.resolve(LIST);
    }
}

THE CALL（来自列表组件）：

export class ListComponent implements OnInit
{
    list: Item[];

    constructor(
        private _router: Router, 
        private _listService: ListService
    ) { }


    getList() 
    {
        this._listService.getList().then(list => this.list = list);
    }

    ngOnInit() 
    {
        this.getList();
    }

}

登录尝试 1：

list 是包含项目列表的变量。在视图中它正确地显示了内容。所以我希望记录它并查看其内容。

getList() 
{
    this._listService.getList().then(list => this.list = list);
    console.log(list)
}

但是当我得到这个错误时：

EXCEPTION: ReferenceError: list is not defined in [null]

登录尝试 2：

正在尝试获得正确的语法：

getList() 
{
    this._listService.getList().then(list => this.list = list);
    console.log(this.list)
}

现在没有错误。但在控制台中它显示 undefined。但是该服务已经被调用。所以它应该包含内容

问题：

考虑到我正在使用 Angular2 - Ecmascript 2016

记录服务调用的正确语法是什么？

谢谢！

Answer 1

实际上this.list是在then方法中注册的回调中设置的。所以你应该使用类似的东西：

getList() 
{
  this._listService.getList().then(list => {
    this.list = list;
    console.log(list);
    console.log(this.list);
  });
}

如果你把 console.log(this.list); 放在正确的承诺中，结果可能不会出现，所以 this.list 可能不会设置...

AngularJs2：如何调试服务调用？（es6语法）

AngularJs 2: How to debug a service call? (es6 syntax)

javascript

angularjs

angular

ecmascript-6

angular2-services

AngularJs2：如何调试服务调用？ （es6语法）

AngularJs 2: How to debug a service call? (es6 syntax)

javascript

angularjs

angular

ecmascript-6

angular2-services

AngularJs2：如何调试服务调用？（es6语法）