I have a backend anf frontend applications. When I'm trying to get info about object 'Probe', i get its fields:

But when I'm trying to get this info in Angular, i get an undefined value. Here is the code:

The Probe class:

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

And the class, where I get the info( method 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' });
  }
}

Here is the console log:

Also the code, where I show the info:

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

I want to get the info from server about Probe object

CodePudding user response：

So the guy's tell you above, try this:

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

So the data will not be undefined anymore.