提问人：Kevresh 提问时间：12/9/2022 更新时间：12/9/2022 访问量：48
如何使用 Angular 在 HTML 中显示 JSON 嵌套数组中特定键的值？
how show the value of an specific key in a nested array of json in the html using angular?
问：
我是使用 Angular 尝试创建一个简单的 CRUD 的新手，我的问题是我从 Spring Boot 服务器使用一个 API，并且我有 3 个相互关联的表，但我的问题是，当我尝试使用 Angular 将表用户的信息放入表中时，我得到了下一个结果：
表单中具有外键值的字段以 JSON 形式从 SpringBoot 返回，因为表“Empresa”和“Roles”有自己的模型，我在组件中的代码.html是：
<h2>Lista Usuarios</h2>
<table class="table table-striped">
<thead class="table-dark">
<tr>
<th>Cedula</th>
<th>Nombre</th>
<th>Apellido</th>
<th>clave</th>
<th>email</th>
<th>Empresa</th>
<th>NIT</th>
<th>Rol</th>
<th>Estado</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let usuario of usuarios">
<td>{{usuario.cedula}}</td>
<td>{{usuario.primernombre}}</td>
<td>{{usuario.primerapellido}}</td>
<td>{{usuario.clave}}</td>
<td>{{usuario.email}}</td>
<td>{{usuario.nitempresa| json}}</td>
<td>{{usuario.nitempresa | json}}</td>
<td>{{usuario.rol | json}}</td>
<td>{{usuario.estado | json}}</td>
</tr>
</tbody>
</table>
注意：如果我不使用 |json，表只显示 Object 对象
我解决这个问题的最好尝试是使用以下代码：
<h2>Lista Usuarios</h2>
<table class="table table-striped">
<thead class="table-dark">
<tr>
<th>Cedula</th>
<th>Nombre</th>
<th>Apellido</th>
<th>clave</th>
<th>email</th>
<th>Empresa</th>
<th>NIT</th>
<th>Rol</th>
<th>Estado</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let usuario of usuarios">
<td>{{usuario.cedula}}</td>
<td>{{usuario.primernombre}}</td>
<td>{{usuario.primerapellido}}</td>
<td>{{usuario.clave}}</td>
<td>{{usuario.email}}</td>
<td *ngFor="let empresa of usuario.nitempresa | keyvalue">{{empresa.value}}</td>
<td>{{usuario.nitempresa | json}}</td>
<td>{{usuario.rol | json}}</td>
<td>{{usuario.estado | json}}</td>
</tr>
</tbody>
</table>
这很好，但我试图获得特定的值，而不是全部，这段代码会导致以下结果：
我无法选择表中显示的键值。
希望你能帮助我，如果这是你需要知道的事情，springboot发送的完整用户请愿书是这样的：
[{"cedula":"111111111","primernombre":"Natalia","segundonombre":"","primerapellido":"Romero","segundoapellido":"Garces","clave":"romerito","email":"[email protected]","nitempresa":{"nit":"800100375","nombre":"Red de Servicios del Cauca","estado":1},"rol":{"id":4,"rol":"coordinador","estado":1},"estado":0},{"cedula":"1193534149","primernombre":"Brayan","segundonombre":"","primerapellido":"Hinestroza","segundoapellido":"Perez","clave":"aaa","email":"[email protected]","nitempresa":{"nit":"1234567890","nombre":"Estrategias Empresariales","estado":1},"rol":{"id":1,"rol":"adminsys","estado":1},"estado":1},{"cedula":"222222222","primernombre":"Andres","segundonombre":"Alberto","primerapellido":"Torres","segundoapellido":"Herrera","clave":"albertico","email":"[email protected]","nitempresa":{"nit":"1234567890","nombre":"Estrategias Empresariales","estado":1},"rol":{"id":1,"rol":"adminsys","estado":1},"estado":1},{"cedula":"94474101","primernombre":"Kevin","segundonombre":"Alexis","primerapellido":"Gallego","segundoapellido":"Albarracin","clave":"password","email":"[email protected]","nitempresa":{"nit":"900697200","nombre":"Comercializadora de servicios del Atlántico","estado":1},"rol":{"id":7,"rol":"gerente","estado":1},"estado":1}]
请注意，当您到达“nit”和“rol”键时，它会打开一个全新的 JSON，希望您能帮助我，如果我在写这篇文章时犯了任何错误，对不起，这不是我的主要语言:)
答：
0赞
Robby Cornelissen
12/9/2022
#1
据我所知，从您的数据中可以看出，您只需要访问嵌套属性，如下所示：
<tr *ngFor="let usuario of usuarios">
<td>{{usuario.cedula}}</td>
<td>{{usuario.primernombre}}</td>
<td>{{usuario.primerapellido}}</td>
<td>{{usuario.clave}}</td>
<td>{{usuario.email}}</td>
<td>{{usuario.nitempresa.nombre}}</td>
<td>{{usuario.nitempresa.nit}}</td>
<td>{{usuario.rol.rol}}</td>
<td>{{usuario.estado}}</td>
</tr>
评论
0赞
Kevresh
12/10/2022
非常感谢，它完全解决了我的问题！，我打错了键哈哈
0赞
vueAng
12/9/2022
#2
您可以使用自定义管道来解决您遇到的问题 如果要解析 json 字符串
str = '{"name":"xxx","age":12}';
<div>{{str|jsonExplain}}</div>
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'jsonExplain'
})
export class JsonExplainPipe implements PipeTransform {
transform(value: any, ...args: unknown[]): unknown {
const strObj = JSON.parse(value);
return strObj.name;
}
}
评论