Question

我正在使用此方法通过http.get调用检索一些数据：

getEmpresas() {
        return this.http.get(this.empresasUrl).map(x => x.json().result[0]); 
    }

然后，我从OnInit方法中的另一个组件调用它：

empresas: any;
    ngOnInit() {
        // reset login status
        this.authenticationService.logout();
        this.authenticationService.getEmpresas().subscribe(res => {this.empresas = res;});

        console.log(this.empresas);

        // get return url from route parameters or default to '/'
        this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
    }

但我在控制台输出中收到“undefined”。

当我做这样的事情时：

this.authenticationService.getEmpresas().subscribe(res => {console.log(res);});

显示结果。另外，如果我将empresas声明为数组，我可以这样做：

this.authenticationService.getEmpresas().subscribe(res => {this.empresas.push(res);});

它会告诉我结果，但它们会在一个空物体内，而这不是我想要的。

Answer 1

this.authenticationService.getEmpresas().subscribe(res => {this.empresas = res;});
console.log(this.empresas);

在上面的代码中，您在异步调用console.log(this.empresas)后立即执行getEmpresas()，这意味着尚未收到结果，并且this.empresas在执行时仍未定义console.log。

请注意，从服务加载数据需要一些时间，因此您应该等待异步回调的结果，然后才能记录结果。在下列情况下，程序在记录之前等待接收数据或错误。

this.authenticationService.getEmpresas()
  .subscribe(
    res => console.log(res),
    err => console.log(err)
  );

如果您正在尝试使用异步代码，请尝试以下操作。

this.authenticationService.getEmpresas().subscribe(res => {this.empresas = res;});
setTimeout(() => console.log(this.empresas), 2000);

考虑到数据在两秒内被检索，此代码等待两秒钟，然后console.log结果。

Alos，如果您在模板中使用以下内容，

{{ empresas.name }}

将其更改为

{{ empresas?.name }}

避免未定义变量引起的错误。称为角度安全导航运算符(?.) ，它是一种流畅且方便的方法来防范属性路径中的空值和未定义值。这意味着，仅当empresas变量设置了某个值时，才会输出名称。

Answer 2

由于代码是异步的，因此在您登录时没有结果，请尝试：

this.authenticationService.getEmpresas()
  .subscribe(
    res => console.log(`onNext ${res}`),
    err => console.log(`onError ${err}`),
    ()  => console.log(`onCompleted`));

来自Observable的数据返回未定义

2 个答案: