1

tengo una tabla dinámica la cual nunca es igual, ni en tamaño ni el nombre de las variables. En la tabla recibo un nombre, un valor y la longitud que debe tener el valor.

Quiero que una vez una de las celdas se modifique cambie de color a verde cuando este con la longitud correcta y a rojo cuando sea incorrecta.

<p-table [value]="valoresProd" responsiveLayout="scroll" (onEditInit)="onEditInit($event)" (onEditCancel)="onCancelInit($event)"> 
  <ng-template pTemplate="header"> 
    <tr> 
     <th>Nombre</th> 
     <th>Valor</th> 
     <th>Longitud</th> 
    </tr> 
  </ng-template> 
   <ng-template pTemplate="body" let-valoresProd let-rowData> 
      <tr> 
      <td>
        <p-cellEditor>
         <ng-template pTemplate="output">
           {{ rowData.Nombre}}
         </ng-template>
       </p-cellEditor>
     </td>
         <td [pEditableColumn]="rowData.Valor" pEditableColumnField="rowData.Valor"> 
          <p-cellEditor [ngStyle]="{'background': colorPrueba}"> 
           <ng-template pTemplate="input"> 
            <input pInputText 
              id="pruebainput"
              type="text" 
              [(ngModel)]="rowData.Valor" 
              name="value"
              (change)="checkWriteValue(rowData.Valor, rowData.Longitud, rowData.HasFixedLength, rowData.Nombre)"
                                (keydown.enter)="checkWriteValue(rowData.Valor, rowData.Longitud, rowData.HasFixedLength, rowData.Nombre)"
> 
          </ng-template> 
          <ng-template pTemplate="output" id="pruebainput"> 
            {{rowData.Valor}}
          </ng-template> 
        </p-cellEditor> 
      </td> 

      <td>
        <p-cellEditor>
         <ng-template pTemplate="output">
           {{ rowData.Longitud}}
         </ng-template>
       </p-cellEditor>
     </td>
   </tr> 
 </ng-template> 
</p-table>   

He probado con ngStyle llamando a una funcion que hacia return del color que queria, pero me modifica toda la columna, cuando deberia cambiar el color solo a la celda que se ha modificado.

Tambien he probado con getElementByID.style, el cual lo modificaba despues de hacer la comprobación de longitud, pero tampoco me funciona.

Gracias.

Añadido:

    checkWriteValue(valor:string, longmax, longmin:boolean, nombre){
      let colorOK:boolean = true;
      if(longmin = true){ 
        if(valor.length == longmax) {
          this.printDisabled=false
          colorOK = true;
          this.getColor(colorOK);
          this.colorPrueba = 'red'
        }else{
          this.showTopCenter("El valor de " + nombre + " tiene que tener un número de caracteres igual a " + longmax)
          this.printDisabled=true
          colorOK = false;
          this.colorPrueba = 'green'
          
        }
        
      }
    } 

    getColor(colorOK?:boolean){
      if( colorOK == true || colorOK == null){
        return null;
      }else {
        return 'red';
        
      }
      
    }
11
  • ¿Cuál es la celda que quieres que cambie de color? ¿Cómo sabes si es correcta o incorrecta?
    – Alvaro Montoro
    Commented el 28 feb. a las 18:22
  • Cada valor tiene una longitud fijada o una longitud máxima de caracteres, la cual mediante una función yo estoy comprobando si la celda cumple eso o no lo cumple. Las celdas que quiero que cambien de color son las que tienes longitud fijada y al modificarla no se ha modifcado con los caracteres que se piden. Por ejemplo-> Celda con nombre Serial y longitud fijada de 9 caracteres. Si la modifico y escribo "123456789" quiero que salga en verde, en cambio, si escribo "1234" al no llegar a los caracteres quiero que salga en rojo.
    – Brian
    Commented el 29 feb. a las 7:46
  • @AlvaroMontoro Un aspecto importante es que la tabla nunca es igual por lo tanto no me puedo guiar por un indice en la tabla.
    – Brian
    Commented el 29 feb. a las 11:23
  • No estoy consiguiendolo, finalmente tirare por modificar el color pero la fila entera, haber si lo consigo
    – Brian
    Commented el 29 feb. a las 15:12
  • 1
    ahi ha sido una de las pruebas si. He subido la logica de colorPrueba como edición al post.
    – Brian
    Commented el 29 feb. a las 16:01

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.