html - 如何从Angular CLI中来自ManyToOne关系的对象中获取值?
问题描述
我正在使用 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:
状态.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');
}
}
员工服务.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;
}
状态.ts
export class Status {
statusId: number;
nameStatus: string;
}
我必须做什么才能获得我的 status.Name?有什么具体的吗?
如果您需要更多文件,请询问我。
解决方案
您必须更具体,如何显示数据或将数据映射到您想要的结构
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(为此。
您的代码似乎不起作用,因为控制器从不分配员工方法
推荐阅读
- macos - 在 macOS 10.8 (Mountain Lion) 之后已弃用的资源 'CurResfile'、'UseResFile' 等的替代 API
- c# - 如何创建一个行数并不总是相同的滚动列表?
- c# - 为什么编译器与继承中的命名空间冲突
- scala - 如何从配置文件在数据框中添加架构
- r - 使用 R 生成用于情感分析的表格和图表
- python-3.x - 有没有办法在不同的数组之间共享一个变量?
- python - 自定义字段 - 无法读取值 - [
] - python - 我可以将数据从本地 SQL Server 数据库导入到 Azure 机器学习虚拟机吗?
- java - 使用 jmockit 测试 foreach 循环
- php - 由于 PHP 邮件程序,Mysql 插入了两条记录,而我的前端是 android 应用程序