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）中，我获取了所有数据，但是在“状态”列中却获得了“ [对象对象]”。

每个人都有一项服务。

注册后，我的下拉菜单会显示所有状态，因此我可以获取它们。

这是我的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。 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;
}

我该怎么办才能获得我的身份。姓名？有什么具体的吗？

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

Answer 1

我怀疑 col 返回状态，而雇员[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）在绑定数据之前，将其映射到所需的结构（在controller / *。ts文件中）。看看Array map(。

您的代码似乎无法正常工作，因为控制器从未分配过员工方法

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

2 个答案: