0

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
  }

1 respuesta 1

1

Necesitas usar el two-way binding (enlace bidireccional) con [(value)] para mostrar lo previamente seleccionado así como la nueva selección. Ahora para el segundo error parece que funciona enviando el evento completo pero faltaría ver como obtenerlo como string, de igual forma con row ya que usar any no debería de ser la solución pero por el momento funciona.

También en lugar de (change) hay que usar (onSelectionChange) el cual es una propiedad de mat-select que emite un evento cada vez que seleccionas algo diferente.

Aquí te va un ejemplo:

Componente

import { Component } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';

const tabla = [
  { nombre: 'Test 1', estado: 'Error' },
  { nombre: 'Test 2', estado: 'En Proceso' },
  { nombre: 'Test 3', estado: 'Finalizado' },
];

@Component({
  selector: 'app-tabla',
  templateUrl: './tabla.component.html',
})
export class TablaComponent {
  displayedColumns: string[] = ['Nombre', 'Estado'];
  dataSource = new MatTableDataSource(tabla);
  estados = ['En Proceso', 'Finalizado', 'Error'];
  estadoSeleccionado: any;
  nombreSeleccionado: string = '';

  cambiarEstado(valor: Event, row: any) {
    this.estadoSeleccionado = valor;
    this.nombreSeleccionado = row.nombre;
  }
}

HTML

<table mat-table [dataSource]="dataSource">
  <ng-container matColumnDef="Nombre">
    <th mat-header-cell *matHeaderCellDef>Nombre</th>
    <td mat-cell *matCellDef="let row">{{ row.nombre }}</td>
  </ng-container>

  <ng-container matColumnDef="Estado">
    <th mat-header-cell *matHeaderCellDef>Estado</th>
    <td mat-cell *matCellDef="let row">
      <mat-form-field appearance="outline">
        <mat-label>Estado</mat-label>
        <mat-select
          [(value)]="row.estado"
          (selectionChange)="cambiarEstado($event.value, row)"
        >
          <mat-option *ngFor="let estado of estados" [value]="estado">
            {{ estado }}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </td>
  </ng-container>

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


<h2>Valores</h2>
Nombre: {{ nombreSeleccionado }},
Estado: {{ estadoSeleccionado }}

Resultado: En esta imagen ya hice los cambios de cada estado, mostrándolos en consola y en la pantalla. Como tienes esto conectado a una BD entonces solo queda mandar a llamar el servicio para guardar la información cada que haces algo. introducir la descripción de la imagen aquí

Select | Angular Material

3
  • ya lo implemente pero sigue sin mostrarlo como default y sin obtener el estatus que se seleccione
    – Root93
    el 28 abr. a las 0:04
  • Ya lo actualice con un ejemplo que funciona.
    – René
    el 28 abr. a las 1:35
  • ya me funcionó, muchas gracias
    – Root93
    el 28 abr. a las 3:44

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.