首页 > 解决方案 > 在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>

电流输出:

在这里队列列我无法用平滑的间距问题渲染它。

在此处输入图像描述

标签: javascripthtmlcssangular

解决方案


您实际上正在为每个嵌套项目创建另一行:

<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>

推荐阅读