Tengo la siguiente tabla con angular material que muestra los datos de la tabla CONTROL y en el campo ESTADO se muestra una lista despegable, lo que necesito es colocar por default en el select el valor que trea de la tabla CONTROL {{element.cveEstado}} , y que se vea el valor en el td de ese campo
Al desplegar el select se muestra la lista de la tabla ESTADOS y quiero que si cambias de estado, este se cambie por el valor que traia por default y se siga mostrando en el td de la tabla.
Asi como esta mi codigo, cuando entras a la pagina, no se ve reflejado en el td del campo el valor que trae por default, hasta que se despliega la lista, se muestra en primera opcion el valor que trae de {{element.cveEstado}}
y no lo quiero asi, quiero que se muestre como el td de ese campo
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<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="cveEstado">
<th mat-header-cell *matHeaderCellDef> ESTADO </th>
<td mat-cell *matCellDef="let element">
<mat-select class="select-css" (selectionChange)="select($event,element)">
<mat-option value="0">{{element.cveEstado}}</mat-option>
<mat-option *ngFor="let estatus of estadoModel" [value]="estatus.cveEstado">
{{estatus.descripcion}}
</mat-option>
</mat-select>
</td>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="descTareaEsp">
<th mat-header-cell *matHeaderCellDef> COMENTARIO </th>
<td mat-cell *matCellDef="let element"> {{element.comentario}} </td>
</ng-container>
<ng-container matColumnDef="fechaProceso">
<th mat-header-cell *matHeaderCellDef> HORA </th>
<td mat-cell *matCellDef="let element"> {{element.hora}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
Anteriormente lo hacia de esta froma y asi si se colocaba por default el valor, pero lo cambie a angular material y ya no lo hace
<td>
<select class="select" (change)="onChangeList($event, contr)">
<option value="0">{{contr.cveEstado}}</option>
<option *ngFor="let estatus of estadoModel" [value]="estatus.cveEstado">
{{estatus.descripcion}}
</option>
</select>
</td>
qué necesito cambiar para que al entrar a la pagina ya se vea reflejado el valor por default?
Dentro del mat - select, tengo la propiedad (selectionChange)="select($event,element)", lo que intento hacer es recuperar el valor de estatus que se seleccione, y el id de ese registro donde se esta cambiando el estatus, y si me recupera el id de la fila, pero no me recupera el vaor del estatus que se elija
este es mi component.ts
displayedColumns: string[] = ['id', 'cveEstado', 'comentario', 'hora'];
control: Control[] = [];
estadoModel: Estados[] = [];
dataSource: any;
private obtenerListaControl() {
this.controService.obtenerControl().subscribe(response => {
this.control = response.data;
this.dataSource = new MatTableDataSource(this.control);
});
}
private obtenerListaEstados() {
this.controlService.obtenerEstados().subscribe(resp => {
this.estadoModel= resp.data;
});
}
select(e, element) {
console.log("ID SELECCIONADO" +element.id);
console.log("CVE SELECCIONADO " +e.target.value); --No muestra nada
}