Question

我使用Angular 5和Java Spring Boot构建了一个应用程序。

我目前遇到的问题是我无法从Angular的数据服务中获取收到的数据。

这是我的数据服务：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'

import 'rxjs/add/operator/toPromise';

import { Observable } from 'rxjs/Observable';

@Injectable()
export class DataService {

  constructor(private http: HttpClient) { }

  getClasses(): Observable<any> {
    return this.http.get('//localhost:8080/classes');
  }
}

这是我想要放置数据的组件：

import { Component, OnInit } from '@angular/core';

import { DataService } from '../data.service';

@Component({
  selector: 'app-classes',
  templateUrl: './classes.component.html',
  styleUrls: ['./classes.component.css']
})
export class ClassesComponent implements OnInit {

  classes: Array<any>;

  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.getClasses();
  }

  getClasses(): void {
    this.dataService.getClasses().subscribe(data => {this.classes = data});
  }
}

这是我从console.log（数据）获得的：

(3) [{…}, {…}, {…}]
0: {version: null, id: 1, name: "3AHIT"}
1: {version: null, id: 2, name: "4AHIT"}
2: {version: null, id: 3, name: "5AHIT"}
length: 3
__proto__: Array(0)

这来自console.log（this.classes）：

undefined

我将此教程用于我的应用程序：https://developer.okta.com/blog/2017/12/04/basic-crud-angular-and-spring-boot

我找不到任何帮助我的东西，我希望有人可以帮助我。

提前致谢。

Answer 1

数据会在您的订阅中进行检索。 IE：

        this.dataService.getClasses().subscribe(data => {
        this.classes = data;
        console.log(this.classes); // <--- this will log your data
        //call a function with this.classes for exemple here
        });

如果您在订阅结果之外使用this.classes，则由于请求尚未完成，因此未定义

Answer 2

您的getClasses()方法是async函数，因此，如果您在console.log(this.classes)中尝试ngOnInit，则在致电this.getClasses()后会立即返回undefined 1}}因为在你的后端调用得到解决之前你的console.log被解雇了。

因此，如果您想检查classes变量的值是否已更新，则应在方法的subscribe中执行此操作。有点像这样：

getClasses(): void {
    this.dataService.getClasses().subscribe(data => {
    this.classes = data;
    console.log(this.classes);
   });
}

这样，您可以确保在解决后端调用后记录变量。

Angular 5数据请求

2 个答案: