[英]Display nested JSON on table with angular
i'm trying to populate a table with a nested json, the json looks like this:我正在尝试用嵌套的 json 填充表格,json 看起来像这样:
[
{
"id": 2,
"nombre": "Dave",
"apellido": "Atkins",
"curso": "Maths",
"estudiante": [
{
"id": 1,
"nombre": "Student1",
"apellido": "Test1"
},
{
"id": 2,
"nombre": "Student2",
"apellido": "Test2"
}
]
}
]
Basically, i need to the table with the students, but i can't make it work.基本上,我需要和学生坐在一起,但我做不到。 I keep getting [object,object][object,object] on the table.
我一直在桌子上得到 [object,object][object,object]。 this data comes from a backend endpoint like this:
此数据来自这样的后端端点:
profesores: Profesor[];
listarProfesores(): void {
this.profesorService.getAll()
.subscribe(
data => {
this.profesores = data;
console.log(data);
}, error => {
console.log(error);
});
}
And this is the html i'm using, i still cant figure out where/how to access that data:这是我正在使用的 html,我仍然无法弄清楚在哪里/如何访问该数据:
<div class="container">
<div class="card">
<div class="card-header">
<h3 style="text-align: center;">Listado de Estudiantes</h3>
</div>
<div class="card-body">
<table class="table table-hover">
<thead style="text-align: center;">
<tr>
<th>Nombre</th>
<th>Apellidos</th>
<th>Editar</th>
<th>Eliminar</th>
</tr>
</thead>
<tbody style="text-align: center;">
<tr *ngFor="let profesor of profesores" class="text-center">
<td>{{profesor.nombre}}</td>
<td>{{profesor.apellido}}</td>
<td>
<button class="btn btn-warning">Editar</button>
</td>
<td>
<button (click)="eliminarEstudiante(profesor.estudiante.id)"
class="btn btn-danger">Eliminar</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Thanks in advance, any help is appreciated在此先感谢,任何帮助表示赞赏
I managed to do it using 2 ngFor like this:我设法使用 2 ngFor 做到了这一点:
<tbody *ngFor="let profesor of profesores" style="text-align: center;">
<tr *ngFor="let student of profesor.estudiante" class="text-center">
<td>{{student.nombre}}</td>
<td>{{student.apellido}}</td>
<td>{{profesor.curso}}</td>
<td>
<button class="btn btn-warning">Editar</button>
</td>
<td>
<button (click)="eliminarEstudiante(profesor.estudiante.id)"
class="btn btn-danger">Eliminar</button>
</td>
</tr>
</tbody>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.