0

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

            });
            }

1 respuesta 1

0

Una forma de hacerlo es crear un método en tu archivo ts, por ejemplo:

getDescription(key:string):string{            
    switch(key){
     case "INP":
        return "In progress";
     case "ERR":
       return "Error";
     case "INF":
       return "Informative";
     default:
       return "Default";

   }

} 

Luego llamas el método en la columna clave de seguridad, de esta manera:

<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"> {{getDescription(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>

Tu Respuesta

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

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