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';
}
}