在ngFor中使用if语句可以通过ngIf指令来实现。ngIf指令用于根据条件动态地添加或移除DOM元素。
下面是在ngFor中使用if语句的示例代码:
<ul>
<li *ngFor="let item of items">
<span>{{ item.name }}</span>
<span *ngIf="item.age > 18">成年人</span>
<span *ngIf="item.age <= 18">未成年人</span>
</li>
</ul>
在上述示例中,ngFor指令用于遍历items数组,并为每个数组元素创建一个li元素。然后,使用ngIf指令根据item的age属性的值来决定是否显示"成年人"或"未成年人"。
ngIf指令的语法是*ngIf="条件表达式"
,当条件表达式为true时,对应的DOM元素会被添加到页面中;当条件表达式为false时,对应的DOM元素会被移除。
ngIf指令还支持else语句,可以在条件不满足时显示备用内容。示例如下:
<ul>
<li *ngFor="let item of items">
<span>{{ item.name }}</span>
<span *ngIf="item.age > 18">成年人</span>
<span *ngIf="item.age <= 18; else underage">未成年人</span>
<ng-template #underage>未成年人(备用内容)</ng-template>
</li>
</ul>
在上述示例中,当item的age属性小于等于18时,ngIf指令的else语句会显示"未成年人(备用内容)"。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云云函数(SCF)。
领取专属 10元无门槛券
手把手带您无忧上云