Tengo la siguiente tabla que se llena con un servicio, en donde el campo clave seguridad me regresa valores como "INP, ERR, INF" y lo que yo quiero pintar en ese campo de la tabla es "In Progress, Error, Informativo" es decir, como la descripción de la clave
Como puedo hacer para pintar esa descripcion, cómo evalúo, si cveSeguridad = INP , pinta In Progress en la celda cveSeguridad
este es mi html
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container matColumnDef="evento">
<th mat-header-cell *matHeaderCellDef> EVENTO </th>
<td mat-cell *matCellDef="let element"> {{element.evento}} </td>
</ng-container>
<ng-container matColumnDef="estado">
<th mat-header-cell *matHeaderCellDef> CLAVE ESTADO </th>
<td mat-cell *matCellDef="let element"
[ngClass]="{'text-red':element.estado== 'Error', 'text-green':element.estado== 'En Ejecución'}">
{{element.estado}} </td>
</ng-container>
<ng-container matColumnDef="cveSeguridad">
<th mat-header-cell *matHeaderCellDef> CLAVE SEGURIDAD </th>
<td mat-cell *matCellDef="let element"> {{element.cveSeguridad}} </td>
</ng-container>
<ng-container matColumnDef="fechaEvento">
<th mat-header-cell *matHeaderCellDef> FECHA DEL EVENTO </th>
<td mat-cell *matCellDef="let element"> {{element.fechaEvento}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns">
</tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
Component.ts
displayedColumns: string[] = ['evento', 'estado', 'cveSeguridad', 'fechaEvento'];
bitacora: Bitacora[] = [];
@ViewChild(MatPaginator) paginator: MatPaginator;
constructor(private service: BitacoraService) { }
ngOnInit(): void {
this.obtenerDatos();
}
dataSource: any;
obtenerDatos() {
this.service.obtenerDatosBit().subscribe(response => {
if (response.data.length == 0) {
Swal.fire({
icon: 'error',
text: 'Sin datos para mostrar'
})
} else {
this.bitacora = response.data;
this.dataSource = new MatTableDataSource(this.bitacora);
this.dataSource.paginator = this.paginator;
}
});
}