Angular 看不到对象的信息

Question

我有一个后端和前端应用程序。当我试图获取有关对象“Probe”的信息时，我得到了它的字段：

但是当我试图在 Angular 中获取此信息时，我得到了一个未定义的值。这是代码：

探针类：

import * as cluster from "cluster";

export class Probe{
  id:number;
  name:string;
  location:string;
  type:string;
  description:string;
  model:string;
  unit:string;
  range_from:number;
  range_to:number;

  constructor(id:number,
              name:string,
              location:string,
              type:string,
              description:string,
              model:string,
              unit:string,
              range_from:number,
              range_to:number) {
    this.id=id;
    this.description=description;
    this.location=location;
    this.model=model;
    this.type=type;
    this.name=name;
    this.unit=unit;
    this.range_from=range_from;
    this.range_to=range_to;
  }
}

以及我获取信息（方法 getProbesBoard()）的类：

import { Injectable } from '@angular/core';
import {Observable} from "rxjs";
import {HttpClient, HttpHeaders} from "@angular/common/http";
import { Probe } from '../entities/Probe';
import { TokenStorageService } from '../auth/token-storage.service';

@Injectable({
  providedIn: 'root'
})
export class UserService {

  private tableUrl = 'http://localhost:8088/api/table/edit/1';
  private editUrl = 'http://localhost:8088/table/edit';
  private addUrl = 'http://localhost:8088/table/add';

  constructor(private http: HttpClient,private token: TokenStorageService) { }

  in!: Probe;

  headers = new HttpHeaders({
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${this.token.getToken()}`
  });

  requestOptions = { headers: this.headers };

  getProbesBoard() :Observable<Probe>{
    console.log("------")
    this.http.get<Probe>(this.tableUrl,this.requestOptions).subscribe(result => {this.in});
    if (this.in===undefined)
    console.log(this.in)
    return this.http.get<Probe>(this.tableUrl,this.requestOptions);
  }

  getAddBoard(): Observable<string> {
    return this.http.get(this.addUrl, { responseType: 'text' });
  }

  getGetBoard(): Observable<string> {
    return this.http.get(this.editUrl, { responseType: 'text' });
  }
}

这是控制台日志：

还有代码，我在其中显示信息：

import {Component, OnInit} from '@angular/core';
import {TokenStorageService} from "../auth/token-storage.service";
import { Probe } from '../entities/Probe';
import { UserService } from '../services/user.service';

@Component({
  selector: 'app-table-page',
  templateUrl: './table-page.component.html',
  styleUrls: ['./table-page.component.css']
})
export class TablePageComponent implements OnInit{
  info: any;
  probes!: Probe;
  errorMessage!: string;

  constructor(private token: TokenStorageService,private userService: UserService) { }

  ngOnInit(): void {
    this.info = {
      token: this.token.getToken(),
      username: this.token.getUsername(),
      roles: this.token.getAuthorities()
    };

    this.userService.getProbesBoard().subscribe(
      data =>{
        this.probes = data;
      },
      error => {
        this.errorMessage = `${error.status}: ${JSON.parse(error.error).message}`;
      }
    )
    console.log("fdsf");
    console.log(this.probes)
    console.log(this.probes.id);
  }

  logout() {
    this.token.signOut();
    window.location.reload();
  }
}

我想从服务器获取有关 Probe 对象的信息

Answer 1

所以上面那个人告诉你的，试试这个：

this.userService.getProbesBoard().subscribe(
      data =>{
        this.probes = data;
        console.log(this.probes, data)
      },
      error => {
        this.errorMessage = `${error.status}: ${JSON.parse(error.error).message}`;
      }
    )

所以数据将不再是未定义的。