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.
4 respuestas
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.
Utilice el enlace condicional para el atributo:
[matBadge]="studentDetails ? studentDetails.length : ''"
Esto debería mostrar esto si la matriz está vacía o indefinida: 
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í
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.