javascript - 在Angular10中将带有数组的JSON显示为TableData
问题描述
实际上,我正在尝试以表格格式显示来自后端的 json 响应。如果它是单个数组,那么它工作正常,如果我需要在同一个表中打印嵌套数组响应,那么我几乎没有问题。
希望我没有使用标准方法来检索,请用解决方案纠正我。
要求:
UserId Username EmailID ProfileDivisionID QueueName
JSON响应:
{
[
{
"_id": "5ff378b34b4d09aa6",
"userRefID": "07f426ff-5db-2c7397edac61",
"userName": "ES Purud Support",
"divisionId": "36852a81-a1cd-7f431c05179f",
"divisionName": "",
"emailId": "eps@ge.com",
"__v": 0,
"queues": [
{
"_id": "5ff378b354b4d09aa1",
"userRefID": "07f426ff-5062c7397edac61",
"queueRefId": "c02db2a-a9cd-0f16c823646b",
"queueName": "test",
"__v": 0
},
{
"_id": "5ff378b3145b3c54b4d09aa2",
"userRefID": "07f426ff-506f-4e5e-afdb-2c7397edac61",
"queueRefId": "a626d99e-f5e9-47ab-a5d0-d493003c737f",
"queueName": "CaIMS",
"__v": 0
},
],
},
{
"_id": "5ff378b34d09aa7",
"userRefID": "c5ce06dc-628-f5fc5a918295",
"userName": "neric",
"divisionId": "36852a81-ad7f7f431c05179f",
"divisionName": "",
"emailId": "intebeb45b9d295@webhook.com",
"__v": 0,
"queues": [
{
"_id": "5ff378b3154b4d09aeb",
"userRefID": "c5ce06dc-f5fc5a918295",
"queueRefId": "f3bf0897f-5b18fc03401b",
"queueName": "Aseem",
"__v": 0
},
],
}
]
}
角HTML:
<app-sr1></app-sr1>
<div class="container">
<h1>Click to get the userdetails</h1>
<div>
<button (click)="Usersgetlist()" type="button" class="btn btn-success text">Get Userlist</button>
</div>
<div *ngIf= "this.userhide == true" class="paddingclass">
<table class="table table-bordered">
<thead>
<tr class="header_color">
<th>User Id</th>
<th>User Name</th>
<th>Email ID</th>
<th>Profile DivisionName</th>
<th>Profile DivisionID</th>
<th>queueName</th>
</tr>
</thead>
<ng-container *ngFor="let project of userAllList">
<tr>
<td>{{ project.userRefID }}</td>
<td>{{ project.userName}}</td>
<td>{{ project.emailId }}</td>
<td>{{ project.divisionName }}</td>
<td>{{ project.divisionId }}</td>
</tr>
<tr *ngFor="let project1 of project.queues">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>{{project1.queueName}}</td>
</tr>
</ng-container>
</table>
</div>
</div>
电流输出:
在这里队列列我无法用平滑的间距问题渲染它。
解决方案
您实际上正在为每个嵌套项目创建另一行:
<tr *ngFor="let project1 of project.queues">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>{{project1.queueName}}</td>
</tr>
您应该将它们放在同一行的td中,并在 span 标签上进行迭代。您最终可以在跨度上添加样式以满足您的需求
<ng-container *ngFor="let project of userAllList">
<tr>
<td>{{ project.userRefID }}</td>
<td>{{ project.userName}}</td>
<td>{{ project.emailId }}</td>
<td>{{ project.divisionName }}</td>
<td>{{ project.divisionId }}</td>
<td>
<span *ngFor="let project1 of project.queues">{{project1.queueName}}</span>
</td>
</tr>
推荐阅读
- python - AttributeError:“QCoreApplication”对象没有属性“setQuitOnLastWindowClosed”
- python - 如何在 conda env 中安装需要共享库的 python 包?
- google-apps-script - Can a script be added to a Google Slide allowing it to advance to the next slide only with a specific alphanumeric input in a text box?
- javascript - Why on earth is not this return statement executed here in my codesandbox UseEffect
- reactjs - 如何在反应中从firestore映射一组地图
- c++ - C++ 中的常量成员是什么?
- html - 中间表列不居中?
- python - 错误 (893) 无法通过索引、python 和 jupyter notebook 打开相机
- node.js - Node.js 如何知道我安装了某个包?
- python - 归一化和绘制按第 4 列分组的 3 列数据