如何在Angular的*ngFor中正确使用*ngIf？考勤状态展示求助

错误原因 #

你的*ngIf写法有误——Angular结构型指令的表达式不需要使用插值语法{{}}，直接使用变量和条件逻辑即可。当前写法*ngIf="{{item.status}} == 'present'"会导致Angular解析表达式失败，无法正常渲染。

修正方案 #

方案1：双*ngIf分别处理状态 #

直接对出勤、缺勤状态做独立判断，代码直观易懂：

<tr *ngFor="let item of attendance; let i = index">
    <th>{{i + 1}}</th>
    <td>{{item.empid}}</td>
    <td>{{item.first_name}} {{item.last_name}}</td>
    <td>{{item.date | date: 'dd-MM-yyyy'}}</td>
    <td>
        <span *ngIf="item.status === 'present'" class="badge rounded-pill bg-success">Present</span>
        <span *ngIf="item.status !== 'present'" class="badge rounded-pill bg-danger">Absent</span>
    </td>
</tr>

方案2：*ngIf + <ng-template>复用模板 #

如果需要更灵活的模板结构，用<ng-template>配合else实现状态切换：

<tr *ngFor="let item of attendance; let i = index">
    <th>{{i + 1}}</th>
    <td>{{item.empid}}</td>
    <td>{{item.first_name}} {{item.last_name}}</td>
    <td>{{item.date | date: 'dd-MM-yyyy'}}</td>
    <td>
        <span *ngIf="item.status === 'present'; else absentTemplate" class="badge rounded-pill bg-success">Present</span>
        <ng-template #absentTemplate>
            <span class="badge rounded-pill bg-danger">Absent</span>
        </ng-template>
    </td>
</tr>

方案3：动态类绑定简化代码 #

通过[ngClass]根据状态绑定样式，减少重复代码：

<tr *ngFor="let item of attendance; let i = index">
    <th>{{i + 1}}</th>
    <td>{{item.empid}}</td>
    <td>{{item.first_name}} {{item.last_name}}</td>
    <td>{{item.date | date: 'dd-MM-yyyy'}}</td>
    <td>
        <span class="badge rounded-pill" [ngClass]="{'bg-success': item.status === 'present', 'bg-danger': item.status !== 'present'}">
            {{item.status === 'present' ? 'Present' : 'Absent'}}
        </span>
    </td>
</tr>

注意事项 #

• 确认item.status的实际取值与判断字符串完全匹配（注意大小写，比如后端返回的是'Present'还是'present'，需对应调整条件）
• 优先使用严格相等运算符===，避免类型转换引发的意外问题

内容的提问来源于stack exchange，提问作者AxyChavan