无论我做啥，变量都是未定义的[重复]

Posted 2023-03-13

【中文标题】无论我做啥，变量都是未定义的[重复]

【英文标题】：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 之后可观察到

【参考方案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)
    );