Icono de mat-display basado en una condición dentro de un bucle for.

Tengo una aplicación angular-django que realiza una llamada a una API de una aplicación de terceros y devuelve una respuesta en formato JSON. Estoy recorriendo la respuesta y mostrando los datos en una tabla.

<tr *ngfor="let item of job_list"> <td style="text-align:center">{{item?.ReleaseName}}</td> <td style="text-align:center">{{item?.Source}}</td> <td style="text-align:center"> <mat-icon *ngif="item?.State === 'Successful'" style="color:green">icono de círculo de verificación</mat-icon> <mat-icon *ngif="item?.State === 'Faulted'" style="color:red">icono de error</mat-icon> <mat-icon *ngif="item?.State === 'Stopped'" style="color:grey">icono de cancelación</mat-icon> {{item?.State}} </td> <td style="text-align:center">{{item?.StartTime | date:'dd-MM-yyyy HH:mm:ss'}}</td> <td style="text-align:center">{{item?.EndTime | date:'dd-MM-yyyy HH:mm:ss'}}</td> </tr>

Aquí, quiero mostrar el mat-icon basado en el valor de {{item?.State}}. Por ejemplo, si el valor es Successful, quiero mostrar el “icono de círculo de verificación”, si es “Faulted”, quiero mostrar “icono de error”, etc. ¿Es posible hacer esto?

Actualización:
Implementé ngIf, pero la alineación está desordenada:

Gracias

davy.ai

July 21, 2023 at 8:15 pm

Sí, es posible mostrar el mat-icon basado en el valor de {{item?.State}} utilizando declaraciones condicionales ngIf. En el fragmento de código proporcionado, esto ya se está implementando utilizando *ngIf para mostrar diferentes mat-icons según los diferentes valores de {{item?.State}}.

Sin embargo, el problema de alineación se puede resolver ajustando el código HTML. Una solución sería envolver las etiquetas mat-icon junto con el texto en divs separados con clases, y establecer la propiedad display de la clase en “flex” con una dirección de “row” para alinear los elementos horizontalmente. Por ejemplo:

<td style="text-align:center">
    <div class="status-icon">
        <mat-icon *ngif="Successful" style="color:green;">icono de marca de verificación</mat-icon>
        <mat-icon *ngif="Failed" style="color: red;">icono de error</mat-icon> 
        <mat-icon *ngif="Stopped" style="color: grey;">icono de cancelación</mat-icon>
    </div>
    <div class="status-text">
        {{item?.State}}
    </div>
</td>

Luego, define la clase CSS como:

.status-icon, .status-text {
    display: flex;
    flex-direction: row;
    align-items: center;
}

Esto debería alinear correctamente el mat-icon y el texto en un formato de fila.

Answer

davy.ai

July 21, 2023 at 8:15 pm
Sí, es posible mostrar el mat-icon basado en el valor de {{item?.State}} utilizando declaraciones condicionales ngIf. En el fragmento de código proporcionado, esto ya se está implementando utilizando *ngIf para mostrar diferentes mat-icons según los diferentes valores de {{item?.State}}.

Sin embargo, el problema de alineación se puede resolver ajustando el código HTML. Una solución sería envolver las etiquetas mat-icon junto con el texto en divs separados con clases, y establecer la propiedad display de la clase en “flex” con una dirección de “row” para alinear los elementos horizontalmente. Por ejemplo:
```
<td style="text-align:center">
    <div class="status-icon">
        <mat-icon *ngif="Successful" style="color:green;">icono de marca de verificación</mat-icon>
        <mat-icon *ngif="Failed" style="color: red;">icono de error</mat-icon> 
        <mat-icon *ngif="Stopped" style="color: grey;">icono de cancelación</mat-icon>
    </div>
    <div class="status-text">
        {{item?.State}}
    </div>
</td>
```
Luego, define la clase CSS como:
```
.status-icon, .status-text {
    display: flex;
    flex-direction: row;
    align-items: center;
}
```
Esto debería alinear correctamente el mat-icon y el texto en un formato de fila.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Icono de mat-display basado en una condición dentro de un bucle for.

Answer

davy.ai