Angular - mat-select dentro de table

 
Vista:

mat-select dentro de table

Publicado por Jorge (1 intervención) el 04/03/2023 05:00:13
Hola a tod@s!

Tengo una tabla, en donde una de sus columnas es un mat-select. Este mat-select se llena con un *ngFor, el problema que he podido solucionar, es como setearle el valor al select de forma dinámica, ya que para cada fila el valor que muestra por defecto debe obtenerse de un atributo del listado recorrido con el *ngFor:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<tbody>
                              <tr *ngFor="let usuario of usuarios" (click)="setSelectedRow(usuario)">
                                <td class="string-column">{{ usuario.nombres }}</td>
                                <td class="number-column">{{ usuario.apellidos }}</td>
                                <td class="string-column">{{ usuario.tipoPersona.nombre }}</td>
                                <td>
                                  <mat-select
                                      (selectionChange)="onAssignationChange($event)">
                                      <mat-option *ngFor="let p of supervisores" [value]="p">
                                          {{ p.nombres }} {{ p.apellidos }}
                                      </mat-option>
                                  </mat-select>
                                </td>
                              </tr>
                            </tbody>

Podrían por favor orientarme?
Gracias.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Pedro

mat-select dentro de table

Publicado por Pedro (8 intervenciones) el 04/03/2023 08:57:56
Hola Jorge. Falta algo de información, pero voy a suponer que que el iterable usuarios tiene un campo supervisor que se corresponde con el valor del supervisor seleccionado en el mat-select. Si esto fuese así, una forma de hacerlo sería la siguiente

1
2
3
4
5
6
7
<mat-select
    (selectionChange)="onAssignationChange($event)">
    [(ngModel)] = "usuario.supervisor"
    <mat-option *ngFor="let p of supervisores" [value]="p">
        {{ p.nombres }} {{ p.apellidos }}
    </mat-option>
</mat-select>

Al añadir el ngModel, además, el valor seleccionado se almacenará directamente en el campo del iterable.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar