HTML 5 Angular 10: Display array attribute values using EXL

user_4886983 0
Viewed 226

I'm trying to display user info using HTML and Angular 10, here my User Object:

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

Here's my html code

            <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>

How can i get Role.names for every User separated by ",".

like:

  name  username    email               password    role
  user  adminName   admin@mail.com     admin123    ADMIN, MODERATOR, USER
angular10 angular html
2 Answers

Create separate function where you can get generated value for displaying

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



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

EDITED:

My way of doing this is another *ngFor at the end of the table, something like this:

<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>

You have to use some CSS to properly display the last row and add a comma as well.

user_99143470
Related