Issue while printing in HTML - html

Question

I am getting an array of users in response and there is one more array of roles in that respose and I want to print that role in my HTML.
Response :
User
email : "musaevt#yahoo.com"
firstName : "Timur"
fullName : "Timur Musaev"
id : "auth0|5a1ff162a916760a80b8b838"
lastName : "Musaev"
roles : Array(2)
0 : "Student"
1 : "Guest"
HTML :
<tbody>
<tr *ngFor="let user of users
| hipUsersSorter: key: direction
| paginate: { id: 'server', itemsPerPage: usersPerPage, currentPage: currentPage, total: totalUsers }">
<td>{{ user.lastName }}</td>
<td>{{ user.firstName }}</td>
<td>{{ user.email }}</td>
<td *ngFor ="let role of user.roles" >
{{ role | translate }}
</td>
<td>
<button md-icon-button color="primary" [routerLink]="[ '/users/edit-user', user.id ]">
<md-icon>edit</md-icon>
</button>
</td>
</tr>
</tbody>
I am able to print this but because of 2 values in roles array, it is creating a new column and alignment gets changed. How can i print those two roles without changing the alignment of my edit button?

Answer 1

What about not looping on the td, but rather create a looping span inside the td?
<td>
<span *ngFor ="let role of user.roles" >
{{ role | translate }}
</span>
</td>
Here's the full HTML code:
<tbody>
<tr *ngFor="let user of users
| hipUsersSorter: key: direction
| paginate: { id: 'server', itemsPerPage: usersPerPage, currentPage: currentPage, total: totalUsers }">
<td>{{ user.lastName }}</td>
<td>{{ user.firstName }}</td>
<td>{{ user.email }}</td>
<td>
<span *ngFor ="let role of user.roles" >
{{ role | translate }}
</span>
</td>
<td>
<button md-icon-button color="primary" [routerLink]="[ '/users/edit-user', user.id ]">
<md-icon>edit</md-icon>
</button>
</td>
</tr>