如何从Angular CLI中来自ManyToOne关系的对象中获取值？

Question

我正在使用 Spring Boot、Angular CLI 和 mySQL。

我有一个员工，但不能有一个婚姻状态，一个 M 状态可以在 N 个员工中。

在 localHost:8080 我得到正确的数组 json:

[{"id":1,"firstName":"Name","lastName":"surname1","emailAddress":"test@test1.com","status":{"statusId":1,"nameStatus":"Single"}

在我的角度表（localHost:4200）中，我得到了所有数据，但在状态列中我得到“[object Object]”。

每个人都有一个服务。

当我进行注册时，我有一个包含所有状态的下拉菜单，所以我可以得到它们。

这是我的 HTML 表格：

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

这里我有一个获取所有员工的 ngFor。

现在我还分享我的服务和我的 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'});
  }

}

这里我还有一个带有 COLUMNS 名称的 const。 员工.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;
}

我必须做什么才能获得我的 status.Name？ 有什么具体的吗？

如果您需要更多文档，请咨询我。

Answer 1

我怀疑 col 返回 status 并且 employee[col] 返回{"statusId":1,"nameStatus":"Single"}。

所以错误似乎是正确的。

如果你只想显示 nameStatus，你可以在这里做一个解决方法：

<td *ngFor="let col of columns">{{employee[col]?.nameStatus ? employee[col]?.nameStatus : employee[col]}}</td>

Answer 2

您必须更具体，如何显示数据或将数据映射到您想要的结构

1) 而不是<td *ngFor="let col of columns">{{employee[col]}}</td> 你可以做

<td>{{employee.firstName}}</td>
<td>{{employee.lastName}}</td>
...
<td>{{employee.status.nameStatus}}</td>

2) 在绑定数据之前，将其映射到您想要的结构（在您的控制器/*.ts 文件中）。 看看Array map(。

您的代码似乎不起作用，因为控制器从不分配员工方法