在HTML中打印时出现问题

Question

我在响应中获得了一组用户，并且在该respose中还有一个角色阵列，我想在我的HTML中打印该角色。

回复：

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>

我可以打印这个但由于在roles数组中有2个值，它正在创建一个新列，并且对齐会发生变化。如何在不更改编辑按钮对齐的情况下打印这两个角色？

Answer 1

如何不在td上循环，而是在td内创建一个循环跨度？

<td>
    <span *ngFor ="let role of user.roles" >
    {{ role | translate }}
    </span>
  </td>

以下是完整的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>
    <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>