Question

我正在尝试使用Angular 8调用我的API并将JSON响应记录到控制台中，但是无论我做什么，控制台都会说未定义内容，而不记录其他任何内容。

组件：

echo $String1; echo '<br>';

echo $String2;

服务：

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;
  }
}

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

export class Kbs {
    'message': string;
}

这就是我在控制台中看到的-

Answer 1

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

console.log(this.getKbs());

代替

console.log(this.kbs);

Answer 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函数。

Answer 3

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

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

Answer 4

很明显你在做什么错。

kbs未定义。在初始化时，您控制台日志kbs。而已。稍后将设置您的数据。了解异步函数。

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

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

变量是不确定的，无论我做什么

4 个答案: