Q:

How to get a value from an Object that comes from a ManyToOne relationship in Angular CLI?

I'm using Spring Boot, Angular CLI and mySQL.
I have an Employee than can have one Marital Status, and one M Status can be in N Employees.
In localHost:8080 I get the right array json:
[{"id":1,"firstName":"Name","lastName":"surname1","emailAddress":"test@test1.com","status":{"statusId":1,"nameStatus":"Single"}

In my angular table(localHost:4200), instead I get every data but in Status column I get "[object Object]".
In have a service for each one.
When I do a registration I have a dropDown w/ all status so I get them.
This is my HTML table:
<table class="table table-bordered">
  <thead>
  <tr>
    <th *ngFor="let col of columns">{{col}}
    </th>
    <th>Actions</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let employee of employees | paginate: {itemsPerPage: pageSize,
                                           currentPage: page,
                                           totalItems: employees.length}  | filterAll: searchString : field">
    <td *ngFor="let col of columns">{{employee[col]}}</td>
    <td>
      <button [ngClass]="getClassCondition(act.actionType)" *ngFor="let act of actions"
              (click)="actionFunc(act, employee)">{{act.label}}</button>
    </td>
  </tr>
  </tbody>
</table>

Here I have an ngFor that gets All employees.
Now I share also my services and my componets.ts:
status.service.ts:
@Injectable({
  providedIn: 'root'
})
export class StatusService {

  private baseUrl = 'http://localhost:8080/api';

  constructor(
    private http: HttpClient) { }

  getStatus(): Observable<Status[]> {
    return this.http.get<Status[]>(`${this.baseUrl}` + '/status');
  }
}

employee.service.ts
const httpOptions = {
  headers: new HttpHeaders({'Content-Type': 'application/json'})
};

@Injectable({
  providedIn: 'root'
})

export class EmployeeService {

  columns = COLUMNS;
  actions = ACTIONS;

  private baseUrl = 'http://localhost:8080/api/employees';

  constructor(private http: HttpClient) {
  }

  getColumns() {
    return this.columns;
  }

  getActions() {
    return this.actions;
  }

  getMetadata() {
    return this.metadata;
  }

  /** GET Employees from the server */
  getEmployees(): Observable<Employee[]> {
    return this.http.get<Employee[]>(this.baseUrl);
  }

  getEmployee(id: number): Observable<Employee> {
    const url = this.baseUrl + '/' + id;
    return this.http.get<Employee>(url);
  }

  /** PUT: update the employee on the server */
  updateEmployee(employee: Employee): Observable<any> {
    return this.http.put(`${this.baseUrl}/${employee.id}`, employee, httpOptions);
  }

  deleteEmployee(id: number): Observable<any> {
    return this.http.delete(`${this.baseUrl}/${id}`, {responseType: 'text'});
  }

}

Here I have also a const w/ COLUMNS name.
employee.ts
export const COLUMNS = ['id', 'firstName', 'lastName', 'emailAddress', 'status'];

export class Employee {
  id: number;
  firstName: string;
  lastName: string;
  emailAddress: string;
  status: string;
}

status.ts
export class Status {
  statusId: number;
  nameStatus: string;
}

What do I have to do to get my status.Name?
Is there something specific?
If you need more documentation ask me.

A:

I suspect that col return status and employee[col] return {"statusId":1,"nameStatus":"Single"}.
So the error seems correct.
You can do a workaround here if you just want to display the nameStatus :
<td *ngFor="let col of columns">{{employee[col]?.nameStatus ? employee[col]?.nameStatus : employee[col]}}</td>

