在指令上使用* ngIf

时间:2018-07-22 11:41:52

标签: angular angular-material angular-directive ngif

我上面有一个mat-icon和一个mat-badge,其中包含一个数字。

仅当数字为mat-badge时,我才希望删除<=0

我对整个*ngIf做了mat-icon,结果很明显,它删除了mat-iconmat-badge

这是代码

<mat-icon matBadge="{{matBadge}}" class="icon">shopping_cart</mat-icon>

2 个答案:

答案 0 :(得分:2)

您可以使用matBadgeHidden指令的matBadge输入属性

<mat-icon matBadge="{{matBadge}}" class="icon" [matBadgeHidden]="number<=0">shopping_cart</mat-icon>

答案 1 :(得分:1)

@displayName答案很干净,您应该这样做,但也可以使用* ngIf,以防万一。

<mat-icon matBadge="{{matBadge}}" class="icon" *ngIf="matBadge > 0; else matBadgeHidden">shopping_cart</mat-icon>

<ng-template #matBadgeHidden>
<mat-icon class="icon">shopping_cart</mat-icon>
</ng-template>