title: The data from backend is not getting an Angular class / prototype
body: <p>I'm developing a frontend in Angular and a backend in Spring. I have a problem when I fetch the data from the backend, the data isn't inheriting the methods of the class it's supposed to belong. I'm getting this error in the Mozilla's console:</p>
  <blockquote>
  <p>ERROR TypeError: skill_r1.getNombre is not a function</p>
  </blockquote>
  <p>I don't understand why, because I'm specifying that the data fetched from the api is of type &quot;Skill[]&quot;... I mean, every property's name is what it's supposed to.
  This is what is fetching from the backend:<a href="https://i.stack.imgur.com/KnsW3.png" rel="nofollow noreferrer">screenshot from browser's console with data from API</a>
  If I replace the fetched data from the backend with a mock data created in Angular itself, it works like charm, <a href="https://i.stack.imgur.com/sMPJZ.png" rel="nofollow noreferrer">as you can see here</a>.</p>
  <p>This is the Angular class (plus getters and setters for each value):</p>
  <pre><code>export class Skill{
  private nombre : String;
  private color : String;
  private valor : number;
  private id : number;
  
  constructor(
      nombre : String,
      color : String,
      valor : number,
      id :number
      ){
          this.nombre = nombre;
          this.color = color;
          this.valor = valor;
          this.id = id;
      }
  </code></pre>
  <p>this is the code for the Service:</p>
  <pre><code>import { HttpClient } from '@angular/common/http';
  import { Injectable } from '@angular/core';
  import { Observable } from 'rxjs';
  import { Skill } from '../clases/Skill';
  
  @Injectable({
      providedIn: 'root'
  })
  export class SkillService {
      skills: Skill[] = [];
      constructor(        
          private api:HttpClient
      ) {}
  
  get(): Observable&lt;Skill[]&gt; {        
          return this.api.get&lt;Skill[]&gt;(Backend_URL + &quot;/skills&quot;)
  }
  </code></pre>
  <p>And this is the code of the component:</p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Skill } from 'src/app/clases/Skill';
  import { SkillService } from 'src/app/services/skill.service';    
  
  @Component({
      selector: 'app-skills',
      templateUrl: './skills.component.html',
      styleUrls: ['./skills.component.css'],
  })
  export class SkillsComponent implements OnInit {
      skills: Skill[] = [];
  
      constructor(        
          private skillService:SkillService ) { }
  
      ngOnInit(): void {
          this.skillService.get().subscribe((skillsDesdeApi)=&gt;{
              this.skills = skillsDesdeApi;            
          })        
      }
  </code></pre>
  <p>Thank you so much yor stopping by!</p>