How can I display a select list within an Angular Material table?

Question

error:

TS2339: Property 'element' does not exist on type 'MyaccountComponent'.

<mat-option *ngFor="let role of element.validRoles" [value]="role.value">

I get the same error if I change element.validRoles to validRoles too.

Component:

export class MyaccountComponent implements OnInit {

  displayedColumns: string[] = ['email', 'role', 'rolestatus', 'validRoles'];
  dataSource = [];

  ngOnInit(){
    this.getAllUsers();
  }

  constructor(private userService: UserService) { }

  getAllUsers(){
    const obs = this.userService.getAllRegisteredUsers();
    obs.subscribe(data => {
      console.log(data.users);
      this.dataSource = data.users
    });
  }

}

Template:

<ng-container matColumnDef="validRoles">
    <th mat-header-cell *matHeaderCellDef> Assign Role</th>
    <mat-form-field appearance="fill">
        <mat-label>Roles</mat-label>
        <mat-select>
          <mat-option *ngFor="let role of element.validRoles" [value]="role.value">
            {{role.viewvalue}}
          </mat-option>
        </mat-select>
      </mat-form-field>
</ng-container>

My data is in the format:

data.users.validRoles = [
         {value: "admin", viewvalue: "Admin"}
];

score 2 · Accepted Answer · answered Jan 19 '21 at 17:54

2

You have no property named element on the component

Replace element.validRoles with dataSource.validRoles

answered Jan 19 '21 at 17:54

Henrik Ståhlberg

318
1
8

score 0 · Answer 2 · answered Jan 20 '21 at 12:11

A couple of changes were required. Moved the select list option data to the component instead of it coming from the backend.

Also the template was missing these lines:

<td mat-cell *matCellDef>

</td>

The updated the template:

<ng-container matColumnDef="validRoles">
  <th mat-header-cell *matHeaderCellDef> Assign Role</th>
  <td mat-cell *matCellDef>
  <mat-form-field appearance="fill">
      <mat-label>Roles</mat-label>
      <mat-select>
        <mat-option *ngFor="let role of validRoles" [value]="role.value">
          {{role.viewvalue}}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </td>
</ng-container>

How can I display a select list within an Angular Material table?

2 Answers2