How to display value from an array in a Material Table Angular-CodePudding

I'm working on a practice angular/spring boot application. I was able to retrieve data from the backend (which is a list of all users) and display it in the front end using angular material table but I am stuck on displaying the roles for that users which is an array since users can have multiple roles. I saw some example of using *ngFor but couldn't find any examples of it using material.

This is what I have so far

ts file

export class BoardUserComponent implements OnInit {
  dataSource: user[] = [];
  columnsToDisplay = ['id', "firstName", "lastName" ,"username", "email", "roles", "action"];
  
  constructor(private userService: UserService, public dialog: MatDialog) { }

  ngOnInit(): void {
    this.userService.getUsers().subscribe(res => {
      this.dataSource = res;
      console.log(this.dataSource);
    });
  }

html

<div >
  <table mat-table [dataSource]="dataSource" #mytable >
  
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef>ID</th>
      <td mat-cell *matCellDef="let element">{{element.id}}</td>
    </ng-container>

    <ng-container matColumnDef="firstName">
      <th mat-header-cell *matHeaderCellDef>First Name</th>
      <td mat-cell *matCellDef="let element">{{element.firstName}}</td>
    </ng-container>

    <ng-container matColumnDef="lastName">
      <th mat-header-cell *matHeaderCellDef>Last Name</th>
      <td mat-cell *matCellDef="let element">{{element.lastName}}</td>
    </ng-container>

    <ng-container matColumnDef="username">
      <th mat-header-cell *matHeaderCellDef>Username</th>
      <td mat-cell *matCellDef="let element">{{element.username}}</td>
    </ng-container>

    <ng-container matColumnDef="email">
      <th mat-header-cell *matHeaderCellDef>Email</th>
      <td mat-cell *matCellDef="let element">{{element.email}}</td>
    </ng-container>

    <ng-container matColumnDef="roles">
      <th mat-header-cell *matHeaderCellDef>Roles</th>
      <td mat-cell *matCellDef="let element">{{element.roles}}</td> <!-- DISPLAYS   [object Object]-->
    </ng-container>

    <!-- ACTION COLUMN-->
    <ng-container matColumnDef="action">
      <th mat-header-cell *matHeaderCellDef>Action</th>
      <td mat-cell *matCellDef="let element" > 
        <button  (click)="openDialog('Update',element)"><i ></i></button> |
        <button  (click)="openDialog('Delete',element)"><i ></i></button>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
    <tr mat-row *matRowDef="let myRowData; columns: columnsToDisplay"></tr>
  </table>
</div>

I'm able to display the ID, FirstName, LastName, Username, and Email just fine. I'm having trouble displays the Roles.Name sample of what the data looks like from the console

email: "[email protected]"
firstName: "John"
id: 1
lastName: "Doe"
roles: Array(2)
0:
id: 1
name: "ROLE_USER"
[[Prototype]]: Object
1:
id: 2
name: "ROLE_MODERATOR"
[[Prototype]]: Object
length: 2
[[Prototype]]: Array(0)
username: "mod"

CodePudding user response：

I have made a familiar thing in my company website but it's made for dynamic tables. In your case try like this

<ng-container matColumnDef="roles">
  <th mat-header-cell *matHeaderCellDef>Roles</th>
  <td mat-cell *matCellDef="let element">
  <your-comp-selector [roles]="element"></your-comp-selector>
  </td> 
</ng-container>

So create a component that can have a button once pressed, display a modal with list or how ever you like it

ng g c < your-row-array-name >

Then on your new comp, use

@Input() roles: Array<any>:

Following display on html

CodePudding user response：

I think I figured it out. Not sure if it's the correct way but was able to display what I wanted. I basically did some manipulation after getting the data for the User info and added a new field in the User interface where I set the roleName as a string instead of an array. Also created a new interface of Roles which has the ID and the roleName variables and used that to temporarily store the values from the user info.

public getUsers(): void {
    this.userService.getUsers().subscribe(res => {
      this.dataSource = res;
      console.log(this.dataSource);
      
      let updatedRoleName;

      this.dataSource.forEach(user => {
        
        user.roles.forEach(role => {
          updatedRoleName = role.roleName;
        });

        user.roleName = updatedRoleName;
      });
    });
  }