Tengo una placa de identificación que muestra el número de

studentDetails.length

En cambio, quiero usar el número solo cuando

(studentDetails.length> 0)

Html:

<mat-icon matBadge="{{studentDetails.length}}" matBadgeColor="primary">home</mat-icon>

Aquí hay un ejemplo StackBlitz a lo que me refiero.

1
Bob 11 may. 2019 a las 01:07

4 respuestas

La mejor respuesta

El mat-badge se puede ocultar cuando no hay ningún elemento con ninguna de estas dos sintaxis:

[matBadge]="studentDetails?.length || null"

[matBadge]="studentDetails?.length" [matBadgeHidden]="studentDetails?.length < 1"

Consulte este stackblitz para una demo Agregué el operador de navegación segura ?. para una protección adicional.

1
ConnorsFan 11 may. 2019 a las 01:08

Utilice el enlace condicional para el atributo:

[matBadge]="studentDetails ? studentDetails.length : ''"

Esto debería mostrar esto si la matriz está vacía o indefinida: ingrese la descripción de la imagen aquí

1
Yousof K. 10 may. 2019 a las 22:28

El siguiente código funciona. Simplemente verifique si la entrada matBadge es 0, luego ponga nulo como entrada matBadge. Me gusta esto:

<mat-icon [matBadge]="studentDetails.length == 0 : null ? studentDetails.length" matBadgeColor="primary">home</mat-icon>

Acabo de cambiar un poco el código de tu stackblitz. Mira aquí ingrese la descripción del enlace aquí

1
Max Hesari 10 may. 2019 a las 22:27

La solución es verificar

studentDetails.length > 0

Por un operador ternario. Si la condición es verdadera, use la longitud, en su lugar use nulo.

<mat-icon matBadge="{{ studentDetails.length > 0 ? studentDetails.length : null }}" matBadgeColor="primary">home</mat-icon>

Esta sería la solución que no modificará mucho su implementación.

Para evitar problemas de rendimiento, use una var adicional para el atributo matBadge, que se modificará si se cambia la longitud de studentDetails, porque la declaración con el operador ternario se ejecutará por angular cada vez que se active la detección de cambio.

También modifiqué su StackBlitz con una versión más eficiente.

1
Marcel Wagner 10 may. 2019 a las 23:10