Блог

На самом деле я пытаюсь показать ответ 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>