Question

我有一个垫子徽章，上面显示了

studentDetails.length

相反，我只想在

时使用该数字

（studentDetails.length> 0）

HTML：

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

这里是我所指的示例StackBlitz。

Answer 1

以下代码有效。只需检查matBadge输入是否为0，然后将null用作matBadge输入即可。像这样：

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

我只是稍微修改了一下stackblitz的代码。看这里 enter link description here

Answer 2

对属性使用条件绑定：

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

如果数组为空或未定义，则应显示以下内容：

Answer 3

如果使用以下两种语法之一都不存在mat-badge，则可以将其隐藏：

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

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

有关演示，请参见this stackblitz。我添加了安全的导航操作符?.，以提供额外的保护。

Answer 4

解决方案是检查

studentDetails.length > 0

由三元运算符。如果条件为true，则使用长度，而使用null。

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

这将是解决方案，不会对您的实现进行太多修改。

为防止性能问题，请为属性matBadge使用一个额外的var，如果更改studentDetails的长度，则将对其进行修改，因为每次更改检测触发时，将使用angular执行带有三元运算符的语句。

我还用性能更高的版本修改了您的StackBlitz。