HTML5Angular10：使用EXL显示数组属性值

Question

我正在尝试使用 HTML 和 Angular 10 显示用户信息，这里是我的用户对象：

    export interface User {
    email: string;
    password: string;
    userName: string;
    roles: Role[]; 
}
export interface Role {
    name: string; 
    
}

这是我的 html 代码

            <tbody>
               <tr *ngFor="let user of users" >
                <td>{{user.name}}</td>
                <td>{{user.username}}</td>
                <td>{{user.email}}</td>
                <td>{{user.password}}</td>
                <td>{{user.roles}}</td>
              </tr>
            </tbody>

如何为每个用“,”分隔的用户获取 Role.names。

喜欢：

  name  username    email               password    role
  user  adminName   admin@mail.com     admin123    ADMIN, MODERATOR, USER

Answer 1

创建单独的函数，您可以在其中获取用于显示的生成值

function getUserRoles(roles) {
  return roles.map((role) => role.name).join(‘ ,’)
}



<td>{{getUserRoles(user.roles)}}</td>

Answer 2

已编辑：

我的做法是 *ngFor 在 table 的末尾，像这样：

<tbody>
    <tr *ngFor="let user of users" >
    <td>{{user.name}}</td>
    <td>{{user.username}}</td>
    <td>{{user.email}}</td>
    <td>{{user.password}}</td>
    <td *ngFor="let role of user.roles">
      {{role.name}}
    </td>
  </tr>
</tbody>

您必须使用一些 CSS 才能正确显示最后一行并添加一个逗号。

HTML5Angular10：使用EXL显示数组属性值

HTML 5 Angular 10: Display array attribute values using EXL

html

angular

angular10