在 HTML 中打印时出现问题

Question

我得到了一组用户的响应，并且在该响应中还有一组角色，我想在我的 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>

我可以打印它，但是由于角色数组中有 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>

在 HTML 中打印时出现问题

Issue while printing in HTML

html

css

angularjs-directive

angular

回复：