角5数据请求

Question

我已经构建了一个具有角5和Java的应用程序。

目前，我遇到的问题是无法将接收到的数据从我的数据服务中提取出来。

这是我的数据服务：

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

您的getClasses()方法是一个async函数，所以如果您试图在ngOnInit中使用console.log(this.classes)，那么在调用this.getClasses()之后，它就会返回undefined，因为您的console.log在后端调用得到解决之前就会被触发。

因此，如果要检查classes变量的值是否已经更新，则应该在方法的subscribe中这样做。像这样的事：

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

这样，一旦对后端的调用已被解决，您就可以确保记录变量。

Answer 2

数据在您的订阅中被撤回。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，则由于请求尚未完成，因此将未定义它。