HTML 5 Angular 10：使用 EXL 显示数组属性值答案

【问题标题】：HTML 5 Angular 10: Display array attribute values using EXLHTML 5 Angular 10：使用 EXL 显示数组属性值
【发布时间】：2021-02-27 04:27:10
【问题描述】：

我正在尝试使用 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

【问题讨论】：

我不明白这个问题。你想得到哪种格式？ {{user.roles.join('-')}} 这样？
我想获取此用户的所有角色名称，用“，”分隔
{{user.roles}} 为角色返回一个数组，我想获取每个数组的名称。

标签： html angular angular10

【解决方案1】：

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

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



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

【讨论】：

【解决方案2】：

编辑：

我的做法是在表格末尾添加另一个*ngFor，如下所示：

<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 来正确显示最后一行并添加逗号。

【讨论】：

你的意思是 {{role.name}}
哦，是的，我就是这么想的！