0

Tengo la siguiente tabla y en el campo MANUAL, me llegan dos posibles valores (0 y 1), donde 1 = Si y 0 = no, y necesito mostrar en el select, los valores Si y No, y que este por defaul el valor seleccionado de lo que me trae {{contr.manual}}

como puedo implementar el nif en el componente para dicha validacion, o como más?

<button type="submit" class="btn btn-primary" (click)="guardar()">Guardar</button>
    <table class="table table-striped">
        <thead>
            <tr>
                <th scope="col">ID</th>
                <th scope="col">ESTADO</th>
                <th scope="col">COMENTARIO</th>
                <th scope="col">MANUAL</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let contr of control">
                <td>{{contr.id}}</td>
                <td>
                    <select class="select" (change)="onChangeList($event, contr)">
                        <option value="0">{{contr.cveEstado}}</option>
                        <option *ngFor="let estatus of estadoModel" [value]="estatus.cveEstado" [disabled]="estatus.cveEstado== 'ERR'? 'disabled': null" [ngClass]="{'text-red':estatus.cveEstado== 'ERR', 'text-blue':estatus.cveEstado== 'INP', 'text-orange':estatus.cveEstado== 'PDD',
                                'text-black':estatus.cveEstado== 'FNZ'}">
                            {{estatus.descripcionEstado}}
                        </option>
                    </select>
                </td>
                <td>{{contr.comentario}</td>
                <td>{{contr.manual}}</td>
            </tr>
        </tbody>
    </table>

Update

<select class="select" (change)="cambiarManual(contr)">
                                <option value="0">{{contr.manual}}</option>
                                <option *ngFor="let manual of manualArr"
                                    [value]="manual.valor">
                                    {{manual.label}}
                                </option>
    </select>
    
    cambiarManual(contr: any) {
    console.log(
      `Manual: ${contr.manual}`
    );
  }

1 respuesta 1

1

Con un arreglo de objetos donde establezcas los valores se soluciona. Agregué una función para que veas en consola que se imprimen los valores.

HTML

<table>
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Estado</th>
      <th>Manual</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of tabla">
      <td>{{ row.nombre }}</td>
      <td>{{ row.estado }}</td>
      <td>
        <select [(ngModel)]="row.manual" (change)="cambiarManual(row)">
          <option *ngFor="let manual of manualArr" [value]="manual.valor">
            {{ manual.label }}
          </option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

Componente

 export class TablaComponent {

  tabla = [
    { nombre: 'Test 1', estado: 'Error', manual: 1 },
    { nombre: 'Test 2', estado: 'En Proceso', manual: 0 },
    { nombre: 'Test 3', estado: 'Finalizado', manual: 1 },
  ];
  manualArr = [
    { label: 'Si', valor: 1 },
    { label: 'No', valor: 0 },
  ];


  cambiarManual(row: any) {
    console.log(
      `Nombre: ${row.nombre}, Estado: ${row.estado}, Manual: ${row.manual}`
    );
  }
}

Resultado

Por alguna razón no se capturaron las opciones que despliegan en el gif pero puedes ver los cambios. introducir la descripción de la imagen aquí

12
  • Gracias, lo probaré. Una consulta , cuando quiero replicar la propiedad [(model)] en el mat select para que por default muestre el valor, en angular 10 no lo hace , hay una propiedad con la que si funcione? Si lo pruebo en una versión de angular 13 me parece si se ve reflejado
    – Root93
    el 29 abr. a las 7:20
  • Te refieres a [(ngModel)]?, no sabría en Angular 10, pero te sale un error o simplemente no funciona?
    – René
    el 29 abr. a las 9:02
  • Más bien en el [(value)]="row.manual" , No marca error , pero simplemente no hace nada , hay una alternativa ?
    – Root93
    el 29 abr. a las 15:39
  • En la pregunta que hiciste de establecer el valor de un mat-select por defecto si te funciona? Porque es prácticamente el mismo código. Trata importando el FormsModule.
    – René
    el 29 abr. a las 21:27
  • si me funciona en angular con la version 13, pero en una version 10 no, pero voy a probar importando FormsModule, gracias
    – Root93
    el 29 abr. a las 22:02

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.