无论我做什么，变量都是未定义的[重复]答案

【问题标题】：Variable is undefined no matter what I do [duplicate]无论我做什么，变量都是未定义的[重复]
【发布时间】：2020-03-07 21:45:57
【问题描述】：

我正在尝试使用 Angular 8 调用我的 API 并将 JSON 响应记录到控制台中，但无论我做什么，控制台都会显示某些内容未定义并且没有记录其他任何内容。

组件：

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpdaService } from '../httpda.service';
import { Kbs } from '../kbs';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  observableKbs: Observable<any[]>;
  kbs: Kbs[];

  constructor(private http: HttpdaService) { }

  ngOnInit() {
    this.getKbs();
    console.log(this.kbs);
  }

  getKbs() {
    this.observableKbs = this.http.getKbs();
    this.observableKbs.subscribe(
      kbs => this.kbs = kbs,
      err => this.http.checkErr(err)
    );
    return this.kbs;
  }
}

服务：

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class HttpdaService {
  serverUrl = 'http://127.0.0.1/';

  constructor(private http: HttpClient, private _router: Router) { }

  getKbs(): Observable<any> {
    return this.http.get<any>(this.serverUrl);
  }

  checkErr(err) {
    if (err instanceof HttpErrorResponse) {
        console.log(err.status);
    }
}

  private extractData(res: Response) {
    let body = res.json();
    return body;
  }
}

型号：

export class Kbs {
    'message': string;
}

当我使用 cURL 调用我的 API 时会收到什么 -

curl 127.0.0.1 

{   "message": "welcome" }

这是我在控制台中得到的 -

【问题讨论】：

首先发布错误...
另外，实际上应该由 service 来应用 checkErr，因此您不必在每个消费者中一次又一次地这样做。
@Carsten，当然，但是有错误。它只是在控制台中显示未定义。我现在就贴出来。
将console.log(this.kbs); 放入.subscribe() 在this.kbs=kbs 之后可观察到

标签： angular typescript

【解决方案1】：

您的服务中的函数是一个异步方法，它返回的值不像您预期的那样同步。问题出在你给出日志的地方。 console.log(this.kbs) 命令在调用 this.getKbs() 调用后立即执行，而不是在返回值之后执行。这就是为什么您在尝试记录它时可能会得到 undefined 的值。
如果您只是记录日志，请尝试将日志放入函数中。或者只是尝试，

console.log(this.getKbs());

而不是

console.log(this.kbs);

【讨论】：

【解决方案2】：

您在 getKbs 函数中有一个异步调用。如果您想控制数据，您应该将控制台日志移动到订阅中，如下所示：

    import { Component, OnInit } from '@angular/core';
    import { Observable } from 'rxjs';
    import { HttpdaService } from '../httpda.service';
    import { Kbs } from '../kbs';

    @Component({
      selector: 'app-home',
      templateUrl: './home.component.html',
      styleUrls: ['./home.component.css']
    })
    export class HomeComponent implements OnInit {
      observableKbs: Observable<any[]>;
      kbs: Kbs[];

      constructor(private http: HttpdaService) { }

      ngOnInit() {
        this.getKbs();
      }

      getKbs() {
        this.observableKbs = this.http.getKbs();
        this.observableKbs.subscribe(
          kbs => {
             this.kbs = kbs,
             console.log(this.kbs);
          }
          err => this.http.checkErr(err)
        );
      }
    }

在您的代码中，您在 getKbs 函数中返回了 undefined。现在您可以使用 this.kbs 而不是调用 getKbs 函数。

【讨论】：

【解决方案3】：

您不会在获取数据的范围之外订阅 kbs。如果您在项目的任何地方都需要异步数据，则必须再次订阅。

另外，如果您在模板中使用异步数据，请使用异步管道。

【讨论】：

【解决方案4】：

很明显你做错了什么。

kbs 未定义。在初始化时，您控制台记录 kbs。而已。您的数据稍后会设置。阅读异步函数。

在实际设置数据时尝试记录：

this.observableKbs.subscribe(
      kbs => {this.kbs = kbs; console.log(kbs)},
      err => this.http.checkErr(err)
    );

【讨论】：